@dso-toolkit/core 83.1.0 → 84.1.0

package/dist/components/dso-survey-rating.js

@@ -1,14 +1,500 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, transformTag } from '@stencil/core/internal/client';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './panel.js';
 
-const surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(0);\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #b62f41;\n  color: #fff;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #ce3f51;\n  color: #fff;\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #e17000;\n  color: #191919;\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #dcd400;\n  color: #191919;\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #79b929;\n  color: #191919;\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #39870c;\n  color: #fff;\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #275937;\n  color: #fff;\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  border-color: #ccc;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton {\n  margin-block-start: 16px;\n}";
+const surveyRatingCss = () => `:host {
+  display: block;
+  position: fixed;
+  inset-block-end: 16px;
+  inset-inline-start: 16px;
+  inline-size: 370px;
+  background-color: #fff;
+  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  z-index: 1000;
+}
+@media screen and (max-width: 480px) {
+  :host {
+    inline-size: 320px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    --panel-heading-padding-inline-start: 8px;
+    --panel-body-padding-inline: 8px;
+  }
+}
+
+*,
+*::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);
+}
+
+.visual-rating-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-block: 8px;
+}
+
+input[type=radio] {
+  appearance: none;
+  cursor: pointer;
+  position: absolute;
+  margin-inline: 0;
+  margin-block: 0;
+  inset-block: 8px 0;
+  inset-inline: 0;
+  z-index: 1;
+}
+
+label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 48px;
+  block-size: 48px;
+  border: 1px solid #ccc;
+  border-inline-end-width: 0;
+  padding-block-start: 8px;
+}
+@media screen and (max-width: 480px) {
+  label {
+    inline-size: 43px;
+    block-size: 43px;
+  }
+}
+label:hover {
+  background-color: #f2f2f2;
+}
+label:active {
+  background-color: #e5e5e5;
+}
+label:first-of-type {
+  border-radius: 4px 0 0 4px;
+}
+label:first-of-type::before {
+  border-radius: 3px 0 0;
+}
+label:last-of-type {
+  border-inline-end-width: 1px;
+  border-radius: 0 4px 4px 0;
+}
+label:last-of-type::before {
+  border-radius: 0 3px 0 0;
+}
+label::before {
+  content: "";
+  display: block;
+  position: absolute;
+  inset-block-start: 0;
+  block-size: 8px;
+  inline-size: 100%;
+  border-block-end: 1px solid #ccc;
+}
+label:has(input:checked) {
+  font-weight: bold;
+}
+label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
+  --_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;
+}
+label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #b62f41;
+  color: #fff;
+}
+label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
+  border-color: #ccc;
+}
+label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
+  --_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;
+}
+label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #ce3f51;
+  color: #fff;
+}
+label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
+  border-color: #ccc;
+}
+label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
+  --_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;
+}
+label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) 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"));
+}
+label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) 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"));
+}
+label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) 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"));
+}
+label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) 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"));
+}
+label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
+  --_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: #e17000;
+  color: #191919;
+}
+label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
+  border-color: #ccc;
+}
+label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
+  --_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;
+}
+label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) 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"));
+}
+label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) 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"));
+}
+label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) 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"));
+}
+label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) 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"));
+}
+label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #dcd400;
+  color: #191919;
+}
+label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
+  border-color: #ccc;
+}
+label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
+  --_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;
+}
+label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) 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"));
+}
+label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) 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"));
+}
+label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) 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"));
+}
+label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) 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"));
+}
+label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
+  --_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: #79b929;
+  color: #191919;
+}
+label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
+  border-color: #ccc;
+}
+label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
+  --_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;
+}
+label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #39870c;
+  color: #fff;
+}
+label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
+  border-color: #ccc;
+}
+label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
+  --_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;
+}
+label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #275937;
+  color: #fff;
+}
+label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
+  border-color: #ccc;
+}
+
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button.dso-secondary {
+  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;
+}
+button.dso-secondary:focus, button.dso-secondary:focus-visible {
+  outline-offset: 2px;
+}
+button.dso-secondary:active {
+  outline: 0;
+}
+button.dso-secondary.extern::after, button.dso-secondary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+button.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);
+}
+button.dso-secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+button.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);
+}
+button.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);
+}
+button.dso-secondary[disabled], button.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);
+}
+button.dso-secondary.dso-small {
+  line-height: 1rem;
+}
+button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+button.dso-secondary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-extra-small {
+  line-height: 1rem;
+}
+button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+button.dso-secondary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-extra-small {
+  padding-block: 9px;
+}
+button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+button.dso-secondary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+button.dso-secondary dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+button.dso-secondary.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button {
+  margin-block-start: 16px;
+}`;
 
 const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoSubmit = createEvent(this, "dsoSubmit", 7);
         this.dsoClose = createEvent(this, "dsoClose", 7);
@@ -31,12 +517,12 @@ const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '01a5ddb99af6a43c5c6c084b65f39c58b30ba614', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'b58dfad1fc08c8bea31ea7f56587070dc848f83c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8db9a730003aef73678876b03030cc2a4ea796ed' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '2fc2e5ac490f5767ddbfed4521582fed650d16de', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'bd6959ff78da6abc23885c6c14db7ed86145694e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'a28a329f0fa45f468d3d01963a927d021b539dae' }, "Heel moeilijk"), h("span", { key: 'fbf4e943cb15e4305450c7eb5c6c147ca128ddda' }, "Heel makkelijk")), h("div", { key: 'b84fb18bb3fe190174bda8edeac06d4954835bce', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '4aa0a0196e7a9b3184e654a0456d3b28690c2962', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'e091b4037ab8c205824129727cbd8dc765d17ca0', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '44c312acd67ede76c8fdd87274caeba67d2d1ccd' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '0ecb810f1f2beae96a37e34bdaf44a93584af6bd', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'c3bd0cb054a938cd64eea176e0f52136a54e9597', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'b1848026e66ccc65414275fa031d144e23e1ac5e' }, "Heel moeilijk"), h("span", { key: '0bf8926e73635ad868fef5c8436f98e529fe0ced' }, "Heel makkelijk")), h("div", { key: '9eeb035dbdd006432d406d581a4645cbf13bb79b', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '99605c67dd666f2ac4425535562bf5ad8b59feac', type: "submit", class: "dso-secondary" }, h("span", { key: '409e8990f6a7708e8b8f0724f2284d845bb0b122' }, "Antwoord verzenden")))));
+        })), h("button", { key: '5c6a198c65f03c5d39a436da6d618aff916d7289', type: "submit", class: "dso-secondary" }, h("span", { key: '44938b291037b417ae1a3d10bdadd98fc07e5b83' }, "Antwoord verzenden")))));
     }
-    static get style() { return surveyRatingCss; }
+    static get style() { return surveyRatingCss(); }
 }, [257, "dso-survey-rating"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -45,22 +531,22 @@ function defineCustomElement$1() {
     const components = ["dso-survey-rating", "dso-icon", "dso-icon-button", "dso-panel"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-survey-rating":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SurveyRating);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SurveyRating);
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "dso-icon-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "dso-panel":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;