@dso-toolkit/core 93.0.1 → 95.0.0

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

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,11 +58,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
+  float: var(--_dt-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -72,6 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -79,6 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -88,6 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
+  float: var(--_dt-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -228,7 +233,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -259,11 +264,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -273,6 +280,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -280,6 +288,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -289,6 +298,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -485,7 +495,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -519,7 +529,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -550,11 +560,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
+  float: var(--_dt-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -564,6 +576,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -571,6 +584,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -580,6 +594,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +680,8 @@ button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -810,7 +826,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,11 +849,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
+  float: var(--_dt-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
+  inline-size: var(--_dt-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -847,6 +865,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -854,6 +873,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -863,6 +883,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+  float: var(--_dt-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1069,7 +1090,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-inline-start: 16px;
+  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
 }
 
 mark {
@@ -1568,170 +1590,9 @@ dso-icon-button + dso-icon-button {
   display: inline;
 }
 
-button.toggle-note {
-  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;
-}
-button.toggle-note:focus, button.toggle-note:focus-visible {
-  outline-offset: 2px;
-}
-button.toggle-note:active {
-  outline: 0;
-}
-button.toggle-note {
-  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;
-}
-button.toggle-note:focus, button.toggle-note:focus-visible {
-  outline-offset: 2px;
-}
-button.toggle-note:active {
-  outline: 0;
-}
-button.toggle-note {
-  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: auto;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-button.toggle-note: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);
-}
-button.toggle-note: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);
-}
-button.toggle-note[disabled], button.toggle-note[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);
-}
-button.toggle-note.dso-small {
-  line-height: 1rem;
-}
-button.toggle-note.dso-small dso-icon, button.toggle-note.dso-small.extern::after, button.toggle-note.dso-small.download::after, button.toggle-note.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-button.toggle-note.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.toggle-note.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.toggle-note.dso-extra-small {
-  line-height: 1rem;
-}
-button.toggle-note.dso-extra-small dso-icon, button.toggle-note.dso-extra-small.extern::after, button.toggle-note.dso-extra-small.download::after, button.toggle-note.dso-extra-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-button.toggle-note.dso-extra-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.toggle-note.dso-extra-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.toggle-note.dso-extra-small {
-  padding-block: 9px;
-}
-button.toggle-note dso-icon:has(+ span:not(.sr-only)) {
-  margin-inline-start: -8px;
-}
-button.toggle-note span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
-}
-button.toggle-note dso-icon + span:not(.sr-only) {
-  margin-inline-start: 8px;
-}
-button.toggle-note {
-  border: 0;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
-}
-button.toggle-note[disabled].dso-spinner-left, button.toggle-note[disabled].dso-spinner-right {
-  color: #39870c;
-}
-button.toggle-note:not([disabled]):hover {
-  text-decoration: underline;
-  text-underline-position: under;
-}
-button.toggle-note.dso-align {
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-button.toggle-note.dso-truncate {
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-button.toggle-note.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-button.toggle-note.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-button.toggle-note dso-icon + span:not(.sr-only),
-button.toggle-note span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-}
-button.toggle-note dso-icon[icon=chevron-left] + span:not(.sr-only),
-button.toggle-note dso-icon[icon=chevron-right] + span:not(.sr-only),
-button.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-left],
-button.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-inline-start: 0;
-}
-button.toggle-note dso-icon,
-button.toggle-note span {
-  vertical-align: middle;
+.toggle-note {
+  --_dt-ozon-content-toggletip-text-decoration: none;
+  --_dt-ozon-content-toggletip-color: #39870c;
 }
 
 span[role=section],
@@ -1754,6 +1615,7 @@ span[role=paragraph] + span[role=paragraph] .dso-tertiary {
 }
 
 a {
+  overflow-wrap: anywhere;
   background-color: transparent;
   color: var(--link-color);
   text-decoration: underline;
@@ -1926,7 +1788,7 @@ table.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 p.editaction-remove,
 span[role=paragraph].editaction-remove,
@@ -1984,9 +1846,9 @@ table.editaction-remove {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   p.editaction-remove,
@@ -2034,7 +1896,7 @@ ins.new-text {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add {
   display: inline-block;
@@ -2072,7 +1934,7 @@ ins.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add p:last-child {
   margin: 0;
@@ -2110,9 +1972,9 @@ del.removed-text {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del.removed-text {
@@ -2154,9 +2016,9 @@ del.editaction-remove {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del.editaction-remove {
@@ -2258,9 +2120,9 @@ del.editaction-remove p:last-child {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .subtitel:has(del:not(.removed-text)) {
@@ -2301,7 +2163,7 @@ del.editaction-remove p:last-child {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 .subtitel ins,
 .subtitel del {
@@ -2340,9 +2202,9 @@ td.editaction-remove {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   td.editaction-remove {
@@ -2382,7 +2244,7 @@ td.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 .begrippenlijst .editaction-add {
@@ -2418,7 +2280,7 @@ td.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 .begrippenlijst .editaction-remove {
   --_dso-alert-success-border-color: #39870c;
@@ -2452,9 +2314,9 @@ td.editaction-add {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .begrippenlijst .editaction-remove {
@@ -2464,7 +2326,7 @@ td.editaction-add {
 .begrippenlijst .editaction-remove dt,
 .begrippenlijst .editaction-remove dd {
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .begrippenlijst .editaction-remove dt,
@@ -2510,7 +2372,7 @@ td.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 .kop del {
   --_dso-alert-success-border-color: #39870c;
@@ -2544,9 +2406,9 @@ td.editaction-add {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .kop del {

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

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '2bd89c9643f0bee020a1fee5354f107c2b3b1e25' }, transformed);
+        return h(Fragment, { key: '5741a8119ade5e097799f2df0f65b203bdb33da4' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }
@@ -250,5 +250,5 @@ export class OzonContent {
 }
 const dependencies = () => {
     dependencies();
-    return (h(Fragment, null, h("dso-icon", null), h("dso-image-overlay", null), h("dso-ozon-content-toggletip", null), h("dso-tooltip", null), h("dso-table", null)));
+    return (h(Fragment, null, h("dso-icon", null), h("dso-image-overlay", null), h("dso-ozon-content-toggletip", null), h("dso-table", null)));
 };

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '4a913253b4cc3dbdf0a35d9d2c1ce5c08fd2db63', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'fc34f5256d97ad72ea29d033115f7d4a520327ab', class: "panel-heading" }, h("slot", { key: '9f00c646ea01b87a03f2a75919e948939e2b3e10', name: "heading" }), h("dso-icon-button", { key: 'c94dd153ae4b87dc327fc92a9e6668170f65a29c', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '2ec1b054a60ccd303be9ce51de1dd92c2e39f361', class: "panel-body" }, h("slot", { key: '6210b499f5a1a075a778210851c7247c2aa10075' }))));
+        return (h("div", { key: '9a973764feb61d6de2e408d0f609b38274a36a60', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '73901c62250df3c0b58364c9c4a5e9841b66bcfb', class: "panel-heading" }, h("slot", { key: '76fb22258250dfe4ed9aa55a9da86b51fc9c368f', name: "heading" }), h("dso-icon-button", { key: 'b0f232c49b121cf4d78656a0a1cc160882290b97', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'b6dbc2e0817882dd3d3e7c20f791f5934dd16e22', class: "panel-body" }, h("slot", { key: '73a6e41633cd6e20ddb05228482bd8cbda3fc10d' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 del {
@@ -67,9 +67,9 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del {

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

@@ -41,7 +41,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'f5745c45fea81d2e36507a0bed3303d20a3ba909', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '442b9881438a1054f00dcd7c57c0545faf851123', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: 'd1fad97a498d2a7fa2c34e561f584b2d0095f164', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'b9c763f5962053f644a0030bdc893e48404147b7', name: "symbol" })), h("div", { key: 'cbb91b0db3422ae4b3c0bbd0fc26a5fa5ca11868', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '636c98028b9aafaaddc74b0e45eac321cd68846d', name: "meta" }), this.interaction !== null && h("slot", { key: '1113d794c10d5471029df1b2963606683ed14fd8', name: "interaction" })), h("div", { key: '4ad42b888c59cd5ef928fe5740b896d7ea5e1db4', class: "dso-plekinfo-card-content" }, h("slot", { key: '22f0a53e72c6a18b135fd6f083854b48681a9aef', name: "content" })))));
+        return (h(Host, { key: 'c9246f5ad6a74a6400c065df557f4e8f2eaeafaf', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'c58c9df599d09f19fe6bd6da277f7adcb7b53363', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '20bd77e16e8031e14aa35bfd1ddc4c3fc0ebb86d', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '7e54c3202e5d1d96aac73b460cc1edc30134f6af', name: "symbol" })), h("div", { key: 'ab4151819bb19fbfb13248e5d48fb8d8082edf97', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'cf2a54a33b5f33149a09e9c89b5fb0398fd46cfa', name: "meta" }), this.interaction !== null && h("slot", { key: 'f89bb7bb1ea86d8cb7546db659284064b519b242', name: "interaction" })), h("div", { key: 'a431c393a757927bbf37d1a42adc5dad2508699b', class: "dso-plekinfo-card-content" }, h("slot", { key: '16ed4f565514c8232737cc2b03b2b40769b298e2', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '841000822b6c884a6f4c43ab09d47fa0f642c6bb' }, h("span", { key: '1377b91a1c39c58410d7f21e3a79449259020a77', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'd7139bb3a28acde489469cd91eb005b8da5dba4a', icon: "spinner" })), h("span", { key: '59e16f07b0c68b8c47107d0a4f4bcbc67ebb28ae', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: 'a477f1ca1a98b2f5f39c080b86b25331e2a214cf' }, h("span", { key: '4cbfc31f0c9723d09b05405cf0ed92c98c5380ea', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'f8335b7c8e6b7f4f598a30c8ebd671f8929bf50c', icon: "spinner" })), h("span", { key: '67fa7e3b2519dbac1bf8e60a3eb38ec4a197871f', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '1891b57d5fa60ae4f9deb8e7d1309fdcbfb410a6' }, h("div", { key: '63a4d271ac4b0f076cd9e36712d8071e96490ad9', class: "project-item-header" }, h("div", { key: '2b28fe00ed7add623560b89cc560d698f86c2ef0', class: "project-item-title" }, h("slot", { key: 'f077657b171ad54bb5105d850debf13cf5b2c40a', name: "title" }), this.label && (h("dso-label", { key: 'e7481c0cd92526a4c11cb42b39f929e476195944', status: "error", compact: true }, this.label))), h("div", { key: 'e6d8bf5bfbda71808cffc2d94d8f6fd2155c6978', class: "project-item-actions" }, h("slot", { key: '171e34455b011fb4f4f403818111a1f3bd007f1c', name: "actions" }))), h("div", { key: 'cdb0baef23a01b2aa970bba977a1a0988552a6a4', class: "project-item-info" }, h("div", { key: 'ca6fdcfaf15f2de35d2605722c271f58a54c79dd', class: "project-item-progress" }, h("slot", { key: 'ac645eb5d7239a3a045c9dc4f61cff5c21311fc1', name: "progress" })), h("div", { key: '224b961ea9d90f35a04869b62ac77cd1985f0be2', class: "project-item-status" }, h("slot", { key: '5080052061b84ad6de62cddd041ce270428f4b95', name: "status" })))));
+        return (h(Fragment, { key: '405e7b748332dbf26f8d94c1418b62aa5fed2eaa' }, h("div", { key: '87516c230f1993d2f6919acc25ca892d8543000c', class: "project-item-header" }, h("div", { key: '239894e732ff99f1f4f284ccf760e4ecd41f5130', class: "project-item-title" }, h("slot", { key: '6c4fb5332371112773465d486222b77bea4858bb', name: "title" }), this.label && (h("dso-label", { key: '696644220895ba0671398292d2b3e78b7b56763b', status: "error", compact: true }, this.label))), h("div", { key: 'def9da5043556d0b0e22a709d4f3d62800c0b7b6', class: "project-item-actions" }, h("slot", { key: '2f40b4618484faf05d2bcb16ce4f7de635269937', name: "actions" }))), h("div", { key: '700947f8af44d03806c8a5ebd752693dad3dab4a', class: "project-item-info" }, h("div", { key: 'cb312a74fbffbde4f441d07269c26ec9f24eeca9', class: "project-item-progress" }, h("slot", { key: '56aadce06faa367be1e8374e4b8efefa744f9941', name: "progress" })), h("div", { key: '951ba20c7d39187030e93fe069fb1ec701e61b1b', class: "project-item-status" }, h("slot", { key: '1092d54206741c7ecb7de86b23cec3884228af60', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 del {
@@ -67,9 +67,9 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del {

package/dist/collection/components/responsive-element/responsive-element.js

@@ -39,7 +39,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '21b7a4354bf4e932a4fc00d4eb979fccc9dd5cc0', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5f6bcc67da3e050ed314e5d3dbdde46726fa670b' })));
+        return (h(Host, { key: '9c763f26d6ebc58fdb47e25e0b6a1fb8738be750', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '05713cd4816c505158225dbe33ab11b14e789181' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }