@dso-toolkit/core 75.1.0 → 77.0.0

package/dist/bundle/dso-list-button.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, F as Fragment } from './p-DHO_Za64.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$5 } from './p-BpUdPxfZ.js';
-import { d as defineCustomElement$4 } from './p-DBE1IrEJ.js';
-import { d as defineCustomElement$3 } from './p-BX-MTpLY.js';
-import { d as defineCustomElement$2 } from './p-B0a0s4C8.js';
+import { d as defineCustomElement$5 } from './p-DM1_b6nQ.js';
+import { d as defineCustomElement$4 } from './p-Hd6HHp3Q.js';
+import { d as defineCustomElement$3 } from './p-CMjyxr8o.js';
+import { d as defineCustomElement$2 } from './p-BGaAMVmM.js';
 
-const listButtonCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n**\n*/\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-tertiary {\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}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-list-button {\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}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n  margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n  font-weight: 700;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
+const listButtonCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n**\n*/\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-tertiary {\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}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-list-button {\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}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n  margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n  font-weight: 700;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
 
 const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends H {
     constructor() {
@@ -79,7 +79,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends H {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'b598da82cfebc24eeccc5a2ec2b46613ba6eba69', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'ddf4368fb2eafc2be93b9a9e5c85c227c220303e', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '4557316922e3a725a13d5cd8f4235a609bc02aff', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'e2c804c1e950dc54eaf0d77312d612060373de59', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '273fb534c093acef320fa5edd50b517df613a3d6', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'ee5f465039b483cfae2c9acc00c17d65bb2b7b13', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '764878744040347dc2aff22692d1f45a7ffbef0b', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'd2e01c12af6796723455de52bf30126d2b408cc3', class: "subcontent" }, h("slot", { key: 'e6f3e2be83b1862de10e2a6e08810ea878e2ed3d', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '7ae611d1c4108b4c95386497b0fb2f224973d179', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '12bb39e41ad953f6666295b89333a041234aafdd', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '89d14e9bcabcc0b30c2009e1e582ccaf31ad2acd', icon: "minus-circle" }), h("span", { key: 'd60265d82b9bcfb8f88b5b6511cbaa51505b6327', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '0f6e62a114ebd88196b73f74f3271b5796089423', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'd1af7d86a8ba2a127c8b8a7bac76030bb986191e', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '7ad09c6b2e5ab9c8b3ba68804aeef73ec2d8b74b', icon: "plus-circle" }), h("span", { key: '759d2e9c007cf517d058907847363bec2f6048be', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: '114dbe1b563e2e4b989b9787508224bc92ea7f88', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '279651ed6b4673607def53ef02a4a47f1eef2100', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '0551e290314ac62131eb37218b6a860ac0e9ae0b', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '4f50393b5563c3b7fe138d3cc4cd87ae76a7e1ad', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '0f43ee5445c6cf49be5075573d8e012ac2570bf5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '22d545debc9d2ecc47406e0196087026b865228b', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '0721a2537944a23835d1e1828a87b75d18e57a31', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '47460c522c5cef35ac7f37afa37c5d7aa9c6b7b7', class: "subcontent" }, h("slot", { key: 'd437d967158345a999293815685951946da55475', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'e03ea8ac5dd31ae4de7ddc4dfc3f4253845202c6', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '7da6ad63789ec3737610d9b574d660da14336c61', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '00aa64efeb850e8399177f6d263ff63df4d36651', icon: "minus-circle" }), h("span", { key: '03679ff5c361989f4504459ddbd83ae0e9561ea4', class: "sr-only" }, "Aantal verlagen")), h("span", { key: 'b897066acf0f4f502b3a8196826b19acfdd48e8c', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'd963a7f42b42758bc336db06c6ccd494a0b44528', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'f01f985c5035b84326d99d00b222cd82d9ba368c', icon: "plus-circle" }), h("span", { key: '52354f0e31a7cc68601ef50ba5da77ea7f551488', class: "sr-only" }, "Aantal verhogen"))))));
     }
     get host() { return this; }
     static get style() { return listButtonCss; }

package/dist/bundle/dso-list-button.js.map

@@ -1 +1 @@
-{"file":"dso-list-button.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  & {\r\n    background-color: $background-color;\r\n    border-color: $border-color;\r\n    color: $color;\r\n  }\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      opacity: 1;\r\n\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n  & {\r\n    border-radius: button.$border-radius;\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    font-weight: 600;\r\n    padding-block: #{units.$u2 - 1};\r\n    padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n    position: relative;\r\n    text-align: start;\r\n    white-space: normal;\r\n    inline-size: 100%;\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  dso-selectable:not(:last-child) {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .dso-selectable-container label {\r\n    font-weight: 700;\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel,\r\n  .subcontent {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    page-break-before: always;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n      this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n            {this.label}\r\n            {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n            {this.subcontentSlot && (\r\n              <span class=\"sr-only\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n                <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n              </span>\r\n            )}\r\n          </dso-selectable>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n          {this.subcontentSlot && (\r\n            <div class=\"subcontent\">\r\n              <slot name=\"subcontent\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-list-button.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  & {\r\n    background-color: $background-color;\r\n    border-color: $border-color;\r\n    color: $color;\r\n  }\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      opacity: 1;\r\n\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n  & {\r\n    border-radius: button.$border-radius;\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    font-weight: 600;\r\n    padding-block: #{units.$u2 - 1};\r\n    padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n    position: relative;\r\n    text-align: start;\r\n    white-space: normal;\r\n    inline-size: 100%;\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  dso-selectable:not(:last-child) {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .dso-selectable-container label {\r\n    font-weight: 700;\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel,\r\n  .subcontent {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    page-break-before: always;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n      this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n            {this.label}\r\n            {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n            {this.subcontentSlot && (\r\n              <span class=\"sr-only\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n                <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n              </span>\r\n            )}\r\n          </dso-selectable>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n          {this.subcontentSlot && (\r\n            <div class=\"subcontent\">\r\n              <slot name=\"subcontent\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-logo.js

@@ -31,7 +31,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends H {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'f8319f0c2a5a76e5aeb41d50c9f0bf81f9c96988', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '7c8d35708cfa747568929f24257c3d871f7238ba', class: "logo-ribbon" }, this.ribbon)));
     }
     static get style() { return logoCss; }
 }, [1, "dso-logo", {

package/dist/bundle/dso-map-base-layers.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-DHO_Za64.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$5 } from './p-BpUdPxfZ.js';
-import { d as defineCustomElement$4 } from './p-DBE1IrEJ.js';
-import { d as defineCustomElement$3 } from './p-BX-MTpLY.js';
-import { d as defineCustomElement$2 } from './p-B0a0s4C8.js';
+import { d as defineCustomElement$5 } from './p-DM1_b6nQ.js';
+import { d as defineCustomElement$4 } from './p-Hd6HHp3Q.js';
+import { d as defineCustomElement$3 } from './p-CMjyxr8o.js';
+import { d as defineCustomElement$2 } from './p-BGaAMVmM.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 
 const translations = {
@@ -50,7 +50,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7e13ee00a63cdad0665bc3730387ccac941c8d66', class: "form-group dso-radios" }, h("legend", { key: '3ef5163845f93065b87711fd01d78725f227d3ce', class: "sr-only" }, "Achtergrond"), h("div", { key: 'f0dafaffdc8c13125cd4afb3c98b6384e1312433', class: "dso-label-container" }, h("span", { key: 'bcf82a98342df39d98832db27823db6e6b2713a2', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '2feee1a616600ef226745c101d9a288b25753ac3', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'acd8cb9bd22f5021d89e656292650098afb58d3c', class: "form-group dso-radios" }, h("legend", { key: '3f6c5f5297323a9d0d1c5195df12b5e162ae3991', class: "sr-only" }, "Achtergrond"), h("div", { key: 'eea63f4a56b1d01fffaab78202718d667533948f', class: "dso-label-container" }, h("span", { key: 'c8aba96d494bea90da43c86c4cc28f0f2ae9f737', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'e6b5b3718321632fe2b9f794dec1dd74b2876620', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return this; }
     static get style() { return mapBaseLayersCss; }

package/dist/bundle/dso-map-controls.js

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$3 } from './p-BpUdPxfZ.js';
-import { d as defineCustomElement$2 } from './p-DD69Irdl.js';
+import { d as defineCustomElement$4 } from './p-Cve9JK5u.js';
+import { d as defineCustomElement$3 } from './p-DM1_b6nQ.js';
+import { d as defineCustomElement$2 } from './p-CoKesn28.js';
 
 const translations = {
     en: {
@@ -24,7 +25,7 @@ const translations = {
     },
 };
 
-const mapControlsCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n**\n*/\n:host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  inset-block-end: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 100%;\n  transition: transform 300ms ease;\n  inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  inset-block-start: 16px;\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}\n\n.toggle-visibility-button {\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}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button {\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}\n.toggle-visibility-button {\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}\n.toggle-visibility-button:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.toggle-visibility-button:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[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}\n.toggle-visibility-button.dso-small {\n  line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button dso-icon:has(+ span:not(.sr-only)),\n.toggle-visibility-button svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\n.toggle-visibility-button span:not(.sr-only) + dso-icon,\n.toggle-visibility-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.toggle-visibility-button dso-icon + span:not(.sr-only),\n.toggle-visibility-button svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.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}\n.toggle-visibility-button.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}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button.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}\n.toggle-visibility-button.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}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button {\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\n.toggle-visibility-button {\n  position: absolute;\n  inset-inline-end: calc(100% + 56px);\n  inset-block-start: 16px;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  inset-inline-end: calc(100% + 16px);\n  inset-block-start: 16px;\n}\n.zoom-buttons button {\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}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button {\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}\n.zoom-buttons button {\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}\n.zoom-buttons button:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.zoom-buttons button:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.zoom-buttons button[disabled], .zoom-buttons button[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}\n.zoom-buttons button.dso-small {\n  line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.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}\n.zoom-buttons button.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}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button.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}\n.zoom-buttons button.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}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-start-start-radius: 4px;\n  border-start-end-radius: 4px;\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-end-start-radius: 4px;\n  border-end-end-radius: 4px;\n  border-block-start: 1px solid #ccc;\n}\n.zoom-buttons button:focus-visible {\n  outline-offset: -1px;\n}\n\n.close-button {\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}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.close-button.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: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.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: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.close-button {\n  padding: 0;\n  position: absolute;\n  inset-inline-end: 16px;\n  inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-block-end: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    block-size: 40px;\n    margin-inline-end: 0;\n    min-inline-size: auto;\n    inset-inline-end: calc(100% + 16px);\n    inline-size: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-inline-end: 0;\n  }\n  .toggle-visibility-button span {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    border: 0;\n  }\n  .zoom-buttons {\n    inset-block-start: 72px;\n  }\n}";
+const mapControlsCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\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}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\na.dso-primary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\na.dso-primary span:not(.sr-only) + svg.di,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + svg.di,\nlabel.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\na.dso-primary svg.di + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary svg.di + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.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: %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}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.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: %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}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.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}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.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}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.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}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\na.dso-secondary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\na.dso-secondary span:not(.sr-only) + svg.di,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di,\nlabel.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\na.dso-secondary svg.di + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.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}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.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}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.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}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.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}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\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}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map: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}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map: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}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[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}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n  line-height: 1rem;\n}\na.dso-map.dso-small dso-icon,\na.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small svg.di,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small svg.di,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\na.dso-map svg.di:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map svg.di:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\na.dso-map span:not(.sr-only) + svg.di,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + svg.di,\nlabel.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\na.dso-map svg.di + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map svg.di + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  border: 0;\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon, svg.di),\nbutton.dso-map:has(span.sr-only):has(dso-icon, svg.di),\nlabel.dso-map:has(span.sr-only):has(dso-icon, svg.di) {\n  padding: 8px;\n  min-inline-size: auto;\n  block-size: 40px;\n  inline-size: 40px;\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #275937;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n:host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  inset-block-end: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 100%;\n  transition: transform 300ms ease;\n  inline-size: 300px;\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  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  inset-block-start: 16px;\n}\n\n.toggle-visibility-button {\n  position: absolute;\n  inset-inline-end: calc(100% + 56px);\n  inset-block-start: 16px;\n}\n\n.zoom-buttons {\n  position: absolute;\n  inset-inline-end: calc(100% + 16px);\n  inset-block-start: 16px;\n}\n\n.close-button {\n  padding: 0;\n  position: absolute;\n  inset-inline-end: 16px;\n  inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-block-end: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  button.toggle-visibility-button {\n    block-size: 40px;\n    margin-inline-end: 0;\n    min-inline-size: auto;\n    inset-inline-end: calc(100% + 16px);\n    inline-size: 40px;\n  }\n  button.toggle-visibility-button dso-icon {\n    margin-inline-end: 0;\n  }\n  button.toggle-visibility-button span {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    border: 0;\n  }\n  .zoom-buttons {\n    inset-block-start: 72px;\n  }\n}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -43,7 +44,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
-// Sync with $transition-duration in ./map-controls.scss
+// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts
 const transitionDuration = 300;
 const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H {
     constructor() {
@@ -89,7 +90,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '0fd986956411cb17370bee64462d0d8819611841', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '52a726ecf9d7b42dfec754efdf8de04d88123c58', icon: "layers" }), h("span", { key: '1ddd1e60d1a4f018fb84199c3a61066352d06431' }, this.text("layersButton"))), h("div", { key: '034b8741f04b6764fa8fa8b8c308a5a354c0dcb3', class: "zoom-buttons" }, h("button", { key: '859a740325bbeeae6adc2b7f0b373705ff422ee2', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '480623c3611aa1184c7220db69efcfa204f72a2b' }, this.text("zoomIn")), h("dso-icon", { key: '82622c8e1a812ec3db1063124729096d6f0f76a9', icon: "plus" })), h("button", { key: '5452cf6f7ade2d583f3f9563786b6cec01f5ce04', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9952df75387874e21072fb5564588f438e2aa0c6' }, this.text("zoomOut")), h("dso-icon", { key: '81c398b34a59db6f00545264685427ddd466f2d5', icon: "minus" }))), h("section", { key: '48e2d301e96a373af8926c7d5f3fc32068993c23', hidden: this.hideContent }, h("header", { key: 'ebbe567521c62e8243add8859fc0a889e624f5bd' }, h("h2", { key: 'b0b6b51cd9ea6f5795ee8d6f35f2be16ae610010' }, this.text("title")), h("button", { key: '1122debc7dbff1b1144a89ca47c0693b88f53919', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '209fa94e79a1b937e8306b1b0e5953d8e7fa8ef5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'caaedeaabcec01c76928e8f86b952ea9297a25ef', icon: "times" }))), h("dso-scrollable", { key: '34a5fac306731abb91b670f22238501a5cf60f06' }, h("div", { key: '34d4a73073d3a53537821c6d5d1360a5886952aa', class: "content" }, h("slot", { key: '98ed8da0651cbd7d30cc6a38948451bce2e1b29a' }))))));
+        return (h(Fragment, null, h("button", { key: 'd7e6ce0c193d20c2bd1b81155d4456700726c773', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '4537da9f1f1fc94b321c0e054a69a52f8d8e0290', icon: "layers" }), h("span", { key: 'c50693906513a98899f46af62bb2ccd24d2877e4' }, this.text("layersButton"))), h("dso-button-group", { key: '937990ef60cf209ca4272823723ff959e9b6aecc', class: "zoom-buttons", direction: "column" }, h("button", { key: '6e9bf00f366ddd54a2d9223f3cf2f826700360ba', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd2b3fb068bfb21cf4f3eb3a5533569e53642e72b', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '8590e566a0ba65eab342ff1017cae264372ba85b', icon: "plus" })), h("button", { key: 'ccf0fb53608fd3e64529569490156708705ababe', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '2573c3ed65cca3e05bd373ec164b409ce340a6be', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: '89f126f4cd1a4cc3e8d23969874a83770290c893', icon: "minus" }))), h("section", { key: '7a30f147b660050db68e9789231fad6b2556564e', hidden: this.hideContent }, h("header", { key: 'ce63cfb65e6a7f4effa00816c90d9a1a8e8d66a5' }, h("h2", { key: 'e420b15999f01833dc4320a021e3bacf0657b965' }, this.text("title")), h("button", { key: '3f455700599a250226a7660a737695aeb2545806', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b7f50087e93c0cce75913d26ee000d3c0ccd8a46', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '49964958035f2807507bbcd2593039c50c7a1c33', icon: "times" }))), h("dso-scrollable", { key: '1d22e283d773b9f3a379ac008f9f468ce6c351d8' }, h("div", { key: 'f965f466faa0c68fdf5f50718399f56a193f6065', class: "content" }, h("slot", { key: 'c445dfcb3a6416b893d1bf2a0041173179d1f1cf' }))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -109,13 +110,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-map-controls", "dso-icon", "dso-scrollable"];
+    const components = ["dso-map-controls", "dso-button-group", "dso-icon", "dso-scrollable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-map-controls":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MapControls);
             }
             break;
+        case "dso-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
         case "dso-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();

package/dist/bundle/dso-map-controls.js.map

@@ -1 +1 @@
-{"file":"dso-map-controls.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-controls\": {\r\n      title: \"Map layers\",\r\n      layersButton: \"Map layers\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom out\",\r\n      hidePanel: \"Hide panel {{title}}\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-controls\": {\r\n      title: \"Kaartlagen\",\r\n      layersButton: \"Kaartlagen\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom uit\",\r\n      hidePanel: \"Verberg paneel {{title}}\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  inset-block-end: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n  @include button.map();\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    position: absolute;\r\n    inset-inline-end: calc(\r\n      100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size}\r\n    );\r\n    inset-block-start: core-map-controls-variables.$controls-margin;\r\n  }\r\n}\r\n\r\n.zoom-buttons {\r\n  border-radius: 4px;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 0 0;\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      border: 0;\r\n      padding: 8px;\r\n      border-radius: 0;\r\n      border-start-start-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n      flex: 0 0 100%;\r\n      block-size: core-map-controls-variables.$zoom-button-size;\r\n      min-inline-size: auto;\r\n      inline-size: core-map-controls-variables.$zoom-button-size;\r\n\r\n      + button {\r\n        border-radius: 0;\r\n        border-end-start-radius: 4px;\r\n        border-end-end-radius: 4px;\r\n        border-block-start: 1px solid colors.$grijs-20;\r\n      }\r\n\r\n      &:focus-visible {\r\n        outline-offset: -1px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    padding: 0;\r\n    position: absolute;\r\n    inset-inline-end: core-map-controls-variables.$controls-margin;\r\n    inset-block-start: core-map-controls-variables.$controls-margin;\r\n  }\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .toggle-visibility-button {\r\n    block-size: units.$u5;\r\n    margin-inline-end: 0;\r\n    min-inline-size: auto;\r\n    inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n    inline-size: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-inline-end: 0;\r\n    }\r\n\r\n    span {\r\n      @include utilities.sr-only();\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u9;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-controls.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-controls\": {\r\n      title: \"Map layers\",\r\n      layersButton: \"Map layers\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom out\",\r\n      hidePanel: \"Hide panel {{title}}\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-controls\": {\r\n      title: \"Kaartlagen\",\r\n      layersButton: \"Kaartlagen\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom uit\",\r\n      hidePanel: \"Verberg paneel {{title}}\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/button/button.variables\" as button-variables;\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  inset-block-end: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: #2315 this will be redundant when the icon only buttons are replaced with Icon Button\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.toggle-visibility-button {\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + #{core-map-controls-variables.$controls-margin + button-variables.$map-size});\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.close-button {\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-inline-end: core-map-controls-variables.$controls-margin;\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  button.toggle-visibility-button {\r\n    block-size: units.$u5;\r\n    margin-inline-end: 0;\r\n    min-inline-size: auto;\r\n    inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n    inline-size: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-inline-end: 0;\r\n    }\r\n\r\n    span {\r\n      @include utilities.sr-only();\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u9;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"dso-map toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-map\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-map\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </dso-button-group>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-map-overlays.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-DHO_Za64.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$5 } from './p-BpUdPxfZ.js';
-import { d as defineCustomElement$4 } from './p-DBE1IrEJ.js';
-import { d as defineCustomElement$3 } from './p-BX-MTpLY.js';
-import { d as defineCustomElement$2 } from './p-B0a0s4C8.js';
+import { d as defineCustomElement$5 } from './p-DM1_b6nQ.js';
+import { d as defineCustomElement$4 } from './p-Hd6HHp3Q.js';
+import { d as defineCustomElement$3 } from './p-CMjyxr8o.js';
+import { d as defineCustomElement$2 } from './p-BGaAMVmM.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 
 const translations = {
@@ -51,7 +51,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '8ef0c3a734d449e75f42c43e2d2f93acb4a443e3', class: "form-group dso-checkboxes" }, h("legend", { key: 'd5317715612e9790d65a411f291c00d7319b9a60', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e2df4b1aed15cf2e808607a811780ab476bab2b6', class: "dso-label-container" }, h("span", { key: '95751d4947a940c02d7a7b9845f9e51238361519', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'fc68e624a70062c5c98fab61418183ca784f8600', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '912b3952f7f5e647cd41a29ddfd9c9944f0968ad', class: "form-group dso-checkboxes" }, h("legend", { key: '4a00206699febc7cce55074a8ccc656ccadf88af', class: "sr-only" }, "Kaartlagen"), h("div", { key: '0b26d2deddd8fc32b9ecad91b317ff478c31add0', class: "dso-label-container" }, h("span", { key: '03b7e1541b138e5bd3547ba39e8c59612e906da9', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '70f4823f693900a9061395c486c2a0e75b6e8a78', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return this; }
     static get style() { return mapOverlaysCss; }

package/dist/bundle/dso-mark-bar.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-DHO_Za64.js';
-import { d as defineCustomElement$2 } from './p-BpUdPxfZ.js';
+import { d as defineCustomElement$2 } from './p-DM1_b6nQ.js';
 
 const markBarCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem;cursor:pointer}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c;cursor:pointer}.dso-button-container button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
 
@@ -53,7 +53,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends H {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'dbc69a7b3ea7a8079674f8618ee1a3e68050f5eb', class: "dso-mark-bar" }, h("div", { key: '703290b0b304e214e0cc1f21c53fe380602ee634', class: "dso-mark-bar-input" }, h("input", { key: '7450c959ff67440da2306dc70ef6974c108dfada', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '44b4e735cf813c5b31a0a6ded2c8d5e90766c60c', htmlFor: "search-input" }, h("dso-icon", { key: '8fb084ab7814b78ea22bb0ab8dc45c0fb03b7e90', class: "dso-search-icon", icon: "search" }), h("span", { key: '4dac9ca2479985c30b146da387b3222f3151072d', class: "label-text" }, this.label)), h("button", { key: '4df11bccea3f0f6a938c2b67a8d11aac6739bd33', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'c5838a651bb876a0d15e20ad3c2517d8966b3e38', icon: "times" }), h("span", { key: '5ac44326d740f62dd5115bac2a40d3cea085e282', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'a357ba0651af811acd515be32c303c46df8dbf6a', class: "dso-button-container" }, h("span", { key: 'e03d13e9f2cba805ef678b41ed0c957516199ec0', class: "divider" }), h("button", { key: 'b81ca91c9d9e68a0ea5d331ea6d0f5be546eb9ab', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '164f06fc3c4c3597a069241b0589e6b1765e491c', icon: "chevron-up", class: "hydrated" }), h("span", { key: 'baa8c37eb8c7dc03bdaf9773f9331295592064ce', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '32c319b8ba409d6ba1345c8dce6bde2d3bf3486b' }, current, "/", totalCount), h("button", { key: '06b795d479c2124adfb0e6f04572f61459916ec1', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '173d2f2fbe5522010b5595a21af9e6dd9103a33a', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'e1c9ca1417f7af7b211080671a810a8fe3370a14', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'd4653b33ca3755f4b4474cfa809a4a6717c69882', class: "dso-mark-bar" }, h("div", { key: 'a85daadbea28aa4e7fff259947ea9fd4230b3de3', class: "dso-mark-bar-input" }, h("input", { key: 'aec4982d6b8a4cfa13483b5b29fc4343aea8c8d1', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '667522efbfa1943a7a437b53992ce3bc0835c898', htmlFor: "search-input" }, h("dso-icon", { key: '0467c19e9c71c10e7df15ef4ae9e22e5c5404e37', class: "dso-search-icon", icon: "search" }), h("span", { key: '51bdce5ab2db5af561858b6f04a24eb7911dc257', class: "label-text" }, this.label)), h("button", { key: '51087e416b01b925d655ec6406fbe08b451be50d', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'a1cfdcc6b8e43a55894e614c0c8e3f31479e3f83', icon: "times" }), h("span", { key: 'c7b60699a9f0fd4dd5267eb44dafa3fec42cdcdc', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '699cd06de17cfeb920300ab30cc1f1b710dcc6f4', class: "dso-button-container" }, h("span", { key: '51f5f1e8832969752e1d55808d67270300039889', class: "divider" }), h("button", { key: 'd25aead7bf7dea6712729fdf9df1ea34978256ce', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '7b7074ee232b70cec35e944adb2a272483e33a80', icon: "chevron-up", class: "hydrated" }), h("span", { key: '27684b1b27f556d089b977c2ef13f0671227a543', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f920e39db742b95470657577784b1550a05b0610' }, current, "/", totalCount), h("button", { key: '0f78de38dac6f51c7a410a7b31b9fc562b045075', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '929fbb0b495988105ac7e878b8091310d8e018cf', icon: "chevron-down", class: "hydrated" }), h("span", { key: '33d434ce78876accd97e66a451ae868bd37d678d', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get style() { return markBarCss; }
 }, [1, "dso-mark-bar", {