@dso-toolkit/core 102.0.0 → 104.0.0

package/dist/collection/components/map-controls/map-controls.css

@@ -69,9 +69,11 @@ label.dso-primary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-primary:hover,
+a.dso-primary:hover, a.dso-primary:focus-visible,
 button.dso-primary:hover,
-label.dso-primary:hover {
+button.dso-primary:focus-visible,
+label.dso-primary:hover,
+label.dso-primary:focus-visible {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
@@ -85,11 +87,13 @@ label.dso-primary:active {
   color: var(--_dso-button-primary-active-color, #fff);
   float: var(--_dso-button-float-primary, none);
 }
-a.dso-primary[disabled], a.dso-primary[disabled]:hover,
+a.dso-primary[disabled], a.dso-primary[disabled]:hover, a.dso-primary[disabled]:focus-visible,
 button.dso-primary[disabled],
 button.dso-primary[disabled]:hover,
+button.dso-primary[disabled]:focus-visible,
 label.dso-primary[disabled],
-label.dso-primary[disabled]:hover {
+label.dso-primary[disabled]:hover,
+label.dso-primary[disabled]:focus-visible {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
@@ -279,9 +283,11 @@ label.dso-secondary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-secondary:hover,
+a.dso-secondary:hover, a.dso-secondary:focus-visible,
 button.dso-secondary:hover,
-label.dso-secondary:hover {
+button.dso-secondary:focus-visible,
+label.dso-secondary:hover,
+label.dso-secondary:focus-visible {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
@@ -295,11 +301,13 @@ label.dso-secondary:active {
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
+a.dso-secondary[disabled], a.dso-secondary[disabled]:hover, a.dso-secondary[disabled]:focus-visible,
 button.dso-secondary[disabled],
 button.dso-secondary[disabled]:hover,
+button.dso-secondary[disabled]:focus-visible,
 label.dso-secondary[disabled],
-label.dso-secondary[disabled]:hover {
+label.dso-secondary[disabled]:hover,
+label.dso-secondary[disabled]:focus-visible {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
@@ -405,9 +413,11 @@ label.dso-secondary.dso-spinner-left::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
+a.dso-secondary.dso-spinner-left:not([disabled]):hover::before, a.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before,
+label.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
+label.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -417,9 +427,11 @@ label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
+a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
 button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
+label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -435,9 +447,11 @@ label.dso-secondary.dso-spinner-right::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
+a.dso-secondary.dso-spinner-right:not([disabled]):hover::after, a.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after,
+label.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
+label.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -447,9 +461,11 @@ label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
+a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
 button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
+label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -464,9 +480,11 @@ label.dso-secondary.download::after {
   inline-size: 24px;
   vertical-align: top;
 }
-a.dso-secondary.download:hover::after,
+a.dso-secondary.download:hover::after, a.dso-secondary.download:focus-visible::after,
 button.dso-secondary.download:hover::after,
-label.dso-secondary.download:hover::after {
+button.dso-secondary.download:focus-visible::after,
+label.dso-secondary.download:hover::after,
+label.dso-secondary.download:focus-visible::after {
   background-image: var(--_dso-di-download-bosgroen);
 }
 a.dso-secondary.download:active::after,
@@ -490,9 +508,11 @@ label.dso-secondary.extern::after {
   inline-size: 24px;
   vertical-align: top;
 }
-a.dso-secondary.extern:hover::after,
+a.dso-secondary.extern:hover::after, a.dso-secondary.extern:focus-visible::after,
 button.dso-secondary.extern:hover::after,
-label.dso-secondary.extern:hover::after {
+button.dso-secondary.extern:focus-visible::after,
+label.dso-secondary.extern:hover::after,
+label.dso-secondary.extern:focus-visible::after {
   background-image: var(--_dso-di-external-link-bosgroen);
 }
 a.dso-secondary.extern:active::after,
@@ -589,9 +609,11 @@ label.dso-tertiary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-tertiary:hover,
+a.dso-tertiary:hover, a.dso-tertiary:focus-visible,
 button.dso-tertiary:hover,
-label.dso-tertiary:hover {
+button.dso-tertiary:focus-visible,
+label.dso-tertiary:hover,
+label.dso-tertiary:focus-visible {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
@@ -605,11 +627,13 @@ label.dso-tertiary:active {
   color: var(--_dso-button-tertiary-active-color, #173521);
   float: var(--_dso-button-float-tertiary, none);
 }
-a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
+a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover, a.dso-tertiary[disabled]:focus-visible,
 button.dso-tertiary[disabled],
 button.dso-tertiary[disabled]:hover,
+button.dso-tertiary[disabled]:focus-visible,
 label.dso-tertiary[disabled],
-label.dso-tertiary[disabled]:hover {
+label.dso-tertiary[disabled]:hover,
+label.dso-tertiary[disabled]:focus-visible {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
@@ -694,9 +718,11 @@ label.dso-tertiary[disabled].dso-spinner-left,
 label.dso-tertiary[disabled].dso-spinner-right {
   color: #39870c;
 }
-a.dso-tertiary:not([disabled]):hover,
+a.dso-tertiary:not([disabled]):hover, a.dso-tertiary:not([disabled]):active,
 button.dso-tertiary:not([disabled]):hover,
-label.dso-tertiary:not([disabled]):hover {
+button.dso-tertiary:not([disabled]):active,
+label.dso-tertiary:not([disabled]):hover,
+label.dso-tertiary:not([disabled]):active {
   text-decoration: underline;
   text-underline-position: under;
 }
@@ -780,13 +806,18 @@ button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
   background-image: var(--_dso-di-download-grasgroen-40);
 }
-a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
+a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):focus-visible::after,
 button.dso-tertiary.download:not([disabled]):hover::after,
-button.dso-tertiary.download:not([disabled]):active::after,
+button.dso-tertiary.download:not([disabled]):focus-visible::after,
 label.dso-tertiary.download:not([disabled]):hover::after,
-label.dso-tertiary.download:not([disabled]):active::after {
+label.dso-tertiary.download:not([disabled]):focus-visible::after {
   background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen));
 }
+a.dso-tertiary.download:not([disabled]):active::after,
+button.dso-tertiary.download:not([disabled]):active::after,
+label.dso-tertiary.download:not([disabled]):active::after {
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen-140));
+}
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
@@ -803,13 +834,18 @@ button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
   background-image: var(--_dso-di-external-link-grasgroen-40);
 }
-a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
+a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):focus-visible::after,
 button.dso-tertiary.extern:not([disabled]):hover::after,
-button.dso-tertiary.extern:not([disabled]):active::after,
+button.dso-tertiary.extern:not([disabled]):focus-visible::after,
 label.dso-tertiary.extern:not([disabled]):hover::after,
-label.dso-tertiary.extern:not([disabled]):active::after {
+label.dso-tertiary.extern:not([disabled]):focus-visible::after {
   background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen));
 }
+a.dso-tertiary.extern:not([disabled]):active::after,
+button.dso-tertiary.extern:not([disabled]):active::after,
+label.dso-tertiary.extern:not([disabled]):active::after {
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen-140));
+}
 a.dso-map,
 button.dso-map,
 label.dso-map {
@@ -836,6 +872,14 @@ button.dso-map:active,
 label.dso-map:active {
   outline: 0;
 }
+a.dso-map.extern::after, a.dso-map.download::after,
+button.dso-map.extern::after,
+button.dso-map.download::after,
+label.dso-map.extern::after,
+label.dso-map.download::after {
+  content: "";
+  display: inline-block;
+}
 a.dso-map,
 button.dso-map,
 label.dso-map {
@@ -852,9 +896,11 @@ label.dso-map {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-map:hover,
+a.dso-map:hover, a.dso-map:focus-visible,
 button.dso-map:hover,
-label.dso-map:hover {
+button.dso-map:focus-visible,
+label.dso-map:hover,
+label.dso-map:focus-visible {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
@@ -868,11 +914,13 @@ label.dso-map:active {
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-a.dso-map[disabled], a.dso-map[disabled]:hover,
+a.dso-map[disabled], a.dso-map[disabled]:hover, a.dso-map[disabled]:focus-visible,
 button.dso-map[disabled],
 button.dso-map[disabled]:hover,
+button.dso-map[disabled]:focus-visible,
 label.dso-map[disabled],
-label.dso-map[disabled]:hover {
+label.dso-map[disabled]:hover,
+label.dso-map[disabled]:focus-visible {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
@@ -978,9 +1026,11 @@ label.dso-map.dso-spinner-left::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-map.dso-spinner-left:not([disabled]):hover::before,
+a.dso-map.dso-spinner-left:not([disabled]):hover::before, a.dso-map.dso-spinner-left:not([disabled]):focus-visible::before,
 button.dso-map.dso-spinner-left:not([disabled]):hover::before,
-label.dso-map.dso-spinner-left:not([disabled]):hover::before {
+button.dso-map.dso-spinner-left:not([disabled]):focus-visible::before,
+label.dso-map.dso-spinner-left:not([disabled]):hover::before,
+label.dso-map.dso-spinner-left:not([disabled]):focus-visible::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -990,9 +1040,11 @@ label.dso-map.dso-spinner-left:not([disabled]):hover::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, a.dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
 button.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
-label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+button.dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
+label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -1008,9 +1060,11 @@ label.dso-map.dso-spinner-right::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-map.dso-spinner-right:not([disabled]):hover::after,
+a.dso-map.dso-spinner-right:not([disabled]):hover::after, a.dso-map.dso-spinner-right:not([disabled]):focus-visible::after,
 button.dso-map.dso-spinner-right:not([disabled]):hover::after,
-label.dso-map.dso-spinner-right:not([disabled]):hover::after {
+button.dso-map.dso-spinner-right:not([disabled]):focus-visible::after,
+label.dso-map.dso-spinner-right:not([disabled]):hover::after,
+label.dso-map.dso-spinner-right:not([disabled]):focus-visible::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -1020,9 +1074,11 @@ label.dso-map.dso-spinner-right:not([disabled]):hover::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, a.dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
 button.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
-label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+button.dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
+label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -1037,13 +1093,6 @@ label.dso-map {
   padding-inline: 16px;
   white-space: nowrap;
 }
-a.dso-map:focus, a.dso-map:focus-visible,
-button.dso-map:focus,
-button.dso-map:focus-visible,
-label.dso-map:focus,
-label.dso-map:focus-visible {
-  outline-offset: -1px;
-}
 a.dso-map:has(span.sr-only):has(dso-icon),
 button.dso-map:has(span.sr-only):has(dso-icon),
 label.dso-map:has(span.sr-only):has(dso-icon) {
@@ -1052,24 +1101,84 @@ label.dso-map:has(span.sr-only):has(dso-icon) {
   block-size: 40px;
   inline-size: 40px;
 }
+a.dso-map.download::after,
+button.dso-map.download::after,
+label.dso-map.download::after {
+  background-image: var(--_dso-di-download-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  block-size: 24px;
+  inline-size: 24px;
+  vertical-align: top;
+}
+a.dso-map.download:hover::after, a.dso-map.download:focus-visible::after,
+button.dso-map.download:hover::after,
+button.dso-map.download:focus-visible::after,
+label.dso-map.download:hover::after,
+label.dso-map.download:focus-visible::after {
+  background-image: var(--_dso-di-download-bosgroen);
+}
+a.dso-map.download:active::after,
+button.dso-map.download:active::after,
+label.dso-map.download:active::after {
+  background-image: var(--_dso-di-download-wit);
+}
+a.dso-map.download[disabled]::after,
+button.dso-map.download[disabled]::after,
+label.dso-map.download[disabled]::after {
+  background-image: var(--_dso-di-download-grasgroen-40);
+}
+a.dso-map.extern::after,
+button.dso-map.extern::after,
+label.dso-map.extern::after {
+  background-image: var(--_dso-di-external-link-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  block-size: 24px;
+  inline-size: 24px;
+  vertical-align: top;
+}
+a.dso-map.extern:hover::after, a.dso-map.extern:focus-visible::after,
+button.dso-map.extern:hover::after,
+button.dso-map.extern:focus-visible::after,
+label.dso-map.extern:hover::after,
+label.dso-map.extern:focus-visible::after {
+  background-image: var(--_dso-di-external-link-bosgroen);
+}
+a.dso-map.extern:active::after,
+button.dso-map.extern:active::after,
+label.dso-map.extern:active::after {
+  background-image: var(--_dso-di-external-link-wit);
+}
+a.dso-map.extern[disabled]::after,
+button.dso-map.extern[disabled]::after,
+label.dso-map.extern[disabled]::after {
+  background-image: var(--_dso-di-external-link-grasgroen-40);
+}
 
 a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-visible {
   color: #fff;
   text-decoration: none;
 }
-a.dso-secondary {
+a.dso-secondary, a.dso-map {
   text-decoration: none;
 }
-a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active), a.dso-secondary:focus-visible:not(:hover):not(:active) {
+a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active):not(:focus-visible), a.dso-map, a.dso-map:visited:not(:hover):not(:active):not(:focus-visible) {
   color: #39870c;
 }
-a.dso-secondary:hover, a.dso-secondary:focus-visible {
+a.dso-secondary:hover, a.dso-secondary:focus-visible, a.dso-map:hover, a.dso-map:focus-visible {
+  color: #275937;
   text-decoration: none;
 }
+a.dso-secondary:active, a.dso-map:active {
+  color: #fff;
+}
 a.dso-tertiary {
   text-decoration: none;
 }
-a.dso-tertiary, a.dso-tertiary:visited {
+a.dso-tertiary, a.dso-tertiary:visited:not(:hover):not(:focus-visible):not(:active) {
   color: var(--_dso-button-tertiary-color, #39870c);
 }
 

package/dist/collection/components/map-controls/map-controls.js

@@ -105,7 +105,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: 'e971c1d2415789e8e9749483e2b313be50d9051c' }, h("dso-icon-button", { key: 'bc5e0fc5c65bee84669dd9d70a06f9d75582e2ea', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '5b87f7e41bd345fa74b325fab8f84b359b9edd8e', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6f8589d6de460639111412db326d4666671f4bd3', icon: "layers" }), h("span", { key: '7d8747e9d8d7f1c72f560ef30878e769d1efdc3b' }, this.text("layersButton"))), h("dso-button-group", { key: '1b2639df829a0e75bb0a69c4069310a1d52ee69a', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'f36d1eda860ac321a147cac503f59829d8d0ff48', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: 'adf54cf334ffa53012a6496b1e34b12f9545a954', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: 'a9838d9100c0103bb54d7a8ca29310d3f93be6f7', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '9fe65db827459c2787d7527216ba3e995b0c4dbf' }, h("h2", { key: '9b99536205b24aa3d6b16c560f77ca76d6e01346', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'd20262a08c37a2ebcd3ff527968989aa7b4723b3', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '9518d05c37f06d64ae372800e222436619a59d48' }, h("div", { key: '5c74217caf3fc0b904d6c3ffe125d40ff0542046', class: "content" }, h("slot", { key: 'a9046dcf8c6fc256e35a8e724dcf7301bf9e5477' }))))));
+        return (h(Fragment, { key: 'f0b8a8d672ff2ecd51954e396da1231aa8d0a8ee' }, h("dso-icon-button", { key: '9092607b42c28779166c96823e9c4147c0d166d5', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '74b340eda8d100ce5d7ed991e178610a4452902b', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '5be1b6750d24d17d729c91d48c259677348cf84a', icon: "layers" }), h("span", { key: '078ddcd38105cdcac7d913a8917628dc6683331a' }, this.text("layersButton"))), h("dso-button-group", { key: '6bf9253e3357d382835e5e6882c9d1fb153735e2', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '38678972627d1761381393b903fe43f835b2d4b1', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '4ce5007da98518d2d0f34bb54983aad9f7b0b4f0', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: '67c0953adb043a32f95dadd1acd0e3e4ce4e67a8', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '6a3db2fa61ffa819c8a4174cc81d8f6bcf6948d5' }, h("h2", { key: '2185d52419678eef2678dae3c7feae148fc674e6', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'dc34d548a7b7542cd20fdc1e8f7fc7f1cd66f93f', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '8e901c0c6f3ceb1dacc7a324953edeb38b8a5b4f' }, h("div", { key: '63fec1fb6ad45ecb6db1ace06502e6273989ec3f', class: "content" }, h("slot", { key: 'a6f6cf22e6efba5c74fb1f675f85dafdcbf7654b' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/components/map-layer-object.css

@@ -37,7 +37,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -73,7 +73,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/map-layer/components/map-layer-object.js

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: 'c5e36548e72bc0666a85700c7330b4c365b9131d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '9e31367c278552bab3afd29c3dc6637e90501f8a', wijzigactie: this.wijzigactie }, h("div", { key: 'cf6d64912b3f5bb096f320813fc9df3d9cec2f4b', class: "map-layer-object" }, h("div", { key: 'b8efba7c6f35b4f110893fe46be311eb97f923d4' }, h("slot", { key: 'a05039fa9312f4179c3a6ee151f42f761dab26a5', name: "symbol" })), h("div", { key: '3740dd114f54aac8e74ee540b7c9d0e3a7e59451', class: "map-layer-object-heading" }, h("slot", { key: '57e725ad958d33d05deb20ed3c10ec8ee0e6ddbf' }), h("slot", { key: '7e970de4584de11ca1fc7f89bf6feb3ee13689a2', name: "label" })), h("div", { key: '9e996e8eea7be087bcda0e9e004e6244e259de33', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '377be68d382a3101f63aea3791b5d657a168a2d5', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: 'f9616a247c24eb96244e639ff024ca5967bb5196', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '149f01c0a69f30d3c20ffaa072dc428f0ef37a19', wijzigactie: this.wijzigactie }, h("div", { key: '712d0f01e3534a07d7455ca74ca0f646ca5a0c1d', class: "map-layer-object" }, h("div", { key: 'cfed9d0d4db2c775852614b4d40fdf9553df0c34' }, h("slot", { key: '621b529bcea3858f17c041306f35757dddc7eb25', name: "symbol" })), h("div", { key: '3182baa23cabb03c6ed20228f77093a164c7febd', class: "map-layer-object-heading" }, h("slot", { key: '9893441c38120f240cf3e740be3c23e4336023c5' }), h("slot", { key: '898c5345729d8541e162bff741736f75957917b0', name: "label" })), h("div", { key: '7c88070a2f03991c74d269a84bc33428a55fe570', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'bd92a045d8365bb48e809e3a032a672fadc997d2', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/map-layer.css

@@ -34,7 +34,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -70,7 +70,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/map-layer/map-layer.js

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '99a7229c6388ad25695e476197f941bcdea55b88', wijzigactie: this.wijzigactie }, h("div", { key: '98d03ba3f85b59495d96ab46f6f1996815faad63', class: "map-layer" }, h("div", { key: '9ba4d21e9b9e824d24d7871ead06bbddae5de207', class: "map-layer-heading" }, h("slot", { key: '3c63937a916e8d5634a6d790846bfc9bfe622119', name: "name" }), h("slot", { key: '2d782c560f9bee942551b74d60c61e5cc060b791', name: "label" })), this.activatable && (h("div", { key: '02cceff7f735c4ec409caf0fb84141a0d77dace3', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '6df0f748c64cd574e342abf066bed1f5fb19f703', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '363055caf13ec1542ab5c20738edbf76a2dd5899' })));
+        return (h(WrapWijzigactie, { key: '3b6f2734bc91552a2310ac9056710c8b7771fd6f', wijzigactie: this.wijzigactie }, h("div", { key: '390e18062c030bec74ffd0cc9521074801aa4c05', class: "map-layer" }, h("div", { key: 'cc8604314daf0099ddac282b659f9cf4c0618354', class: "map-layer-heading" }, h("slot", { key: 'a6a03b1019615b995f2996b7f02e2b8a8690f3fd', name: "name" }), h("slot", { key: '168842628267169c65647513075175e63b9639a0', name: "label" })), this.activatable && (h("div", { key: 'f6aed0a178405657b04c162f96369e8dbfda3391', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'a6e682d3f77170648e158c3c92e980ab33e458bf', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '2a4219aef3801015d6685877db51b74c18d04d68' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-message/map-message.js

@@ -46,11 +46,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: '3235f6e82ae29895043ea1c3d051854cc5084f34', class: {
+        return (h("div", { key: 'c9e2479aa2ed8d2e79644e49cd5ebc3dfa25055b', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            } }, h("div", { key: '600afa1ea9074f6c27280f8f391c5776288e2fd2', class: "map-message-body", role: role, "aria-atomic": "true" }, iconName && h("dso-icon", { key: '3e27800ca4c87da94581709b391f1b62f089c5fe', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: 'd1e23d701100f53a179a07d7644696bf6ae71e05', class: "map-message-text" }, this.showMessage && h("slot", { key: 'fc246e98b1d51c72e83a392dcb7ada8c8792d199', name: "message" }))), h("slot", { key: '1803667d5307032c00048031eac58ee8de489d50', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            } }, h("div", { key: '5776b283a29596c9281040de37094ac1f59f75e3', class: "map-message-body", role: role, "aria-atomic": "true" }, iconName && h("dso-icon", { key: 'f5abec447926d6da87edf0e9aaf238138d4835af', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '51fdce896caa3953186e9d44d0260de1375dba3e', class: "map-message-text" }, this.showMessage && h("slot", { key: '01d91427248a637ef064b4c5c77c56af00ad4918', name: "message" }))), h("slot", { key: '20e37c50afb82a57d4aa37b13b56c04a31643402', name: "actions", onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "dso-map-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -27,7 +27,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'e4d6d6220ea5a68d34056ab269b78eea5482270a', class: "form-group dso-checkboxes" }, h("legend", { key: 'c4603b4778ff2fc9fd7b5691ffa18a3870437f46', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'f8d0ccb41b50cbcd3e401c22f518015d43882daa', class: "dso-label-container" }, h("span", { key: 'd33e234e0df6ad31870ed3e3c571616c82724acf', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '7608b54517d7a4af4b6fe855617942477a3b26f9', 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: '71d75946e0b8a770f1225d98d96b677d26ca7fba', class: "form-group dso-checkboxes" }, h("legend", { key: 'b8737e0fb86a689d924dd98291ebe45894d47ed3', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'b5498c3021e058385872c38e38ba24853ce467b6', class: "dso-label-container" }, h("span", { key: '11a04eb7c3b680162980b45da6bfc99db18c33f6', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '454934653927d6a842a11f0256ac65ec03df5b36', 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))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -41,7 +41,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '3c6af8d0fa8bf385c374cd33e7a3d81208b51e09', class: "dso-mark-bar" }, h("div", { key: 'e0ff797bc441f057eeb587b721cc7ed461662e27', class: "dso-mark-bar-input" }, h("input", { key: 'a6b5fa4495b2a73ac8a40803e91b25967c0c5cc0', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cebcce6cde81b234783ff1bb1498a2ae7d8e28e8', htmlFor: "search-input" }, h("dso-icon", { key: '7c54d459687ba28907232bc191f256fdf1e438c2', class: "dso-search-icon", icon: "search" }), h("span", { key: '88f4252c26631dc71a405f398b49008e2f8cee8c', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'd6e848214ef5a84517c6a359d82bc7ac4e816870', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'ab9e421dadc33d9b24d8dd3788200a1a5ba19095', class: "dso-button-container" }, h("span", { key: '84dddfc4591fbedec33a16f2712432412558c8e2', class: "divider" }), h("dso-icon-button", { key: 'aa8193e3c6bc54e1aac0c8e2ddfef39adbace740', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '1b583c126ddb3652e2b7a97abbf90f214a06d1e6', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'bbbd379963a7b47961047cdd5856fe4416de9ff6', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: 'b5473d19ac5821d276072cdc195f478daba2d33c', class: "dso-mark-bar" }, h("div", { key: 'ef09d5a5b9035a7cede64c8cca6bde18f12d85af', class: "dso-mark-bar-input" }, h("input", { key: 'ac8c0578e9d8323e1c9a3c774ac28b189bbe4f01', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '95ae62b5fb21211b9a2bda7b740bc416b65fd442', htmlFor: "search-input" }, h("dso-icon", { key: '8ec96e426cb8bc45b12e3e777a1b0d0a51694ac3', class: "dso-search-icon", icon: "search" }), h("span", { key: '914415ab8b75c0eeaf8e4640b50f40dcbde443f8', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'acdb1e76a312b56a5fb64175b1b5b5afd2f2be3e', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '0bc1997f1845cb8d3edea30bc7ff0859a0ac0865', class: "dso-button-container" }, h("span", { key: '75c834ea4990926fe123719fc4764c9ecb0351ef', class: "divider" }), h("dso-icon-button", { key: '38876b499ae0f620fe36ef5d15019262d80306bd', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'f51f491f79542e01fd524f9fe6a0141d542ad72d', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '10663db671f99fb66776b57e80ab81adf463d1f2', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -82,7 +82,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '8e35292cc6b1300baa313a310099c172bf20417c', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'c383e26d7e529a2dc44ee49fee7e535b00ad990d', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
+        return (h("dialog", { key: 'b930438a422cb03660dddbc81210c8f2777017ba', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '5fa203f446079d7473166d22cabf04f11fbb0e6e', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -69,7 +69,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: 'bebcff828c7f3ce40c322d4546cdde7dff3812e2', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '708a59016efc8069ef85a0e06feb71516b98dd18', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '14b21c2c86457fc60709aca5e9aa9ed343786163', class: "onboarding-tip-inner" }, h("div", { key: '683199993bf6993d96748a78e7c9b8c51fa78681', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '3654524691e0ccef4f11cd6ddb7be3043c1efbdc', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '36f25c3e2ef278b5f6f533fa325cb70d0beae0e6', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: '93801f55ee03843daee88de47d743ca3af5c2c33', name: "heading" }))), h("dso-icon-button", { key: '53bda3abdf86e3335a2898841d9df280950c3c11', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '5a486a2e8eee2e5a3f98ae15ee76563fce664b07' }))), h("div", { key: 'd1987ab7e4216867e6b4112832be253283d6a07b', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: '64a8925e293181d4b11f5e1c711ed78745d00ed7', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '3071a0cd95ba3f92842f7ccb11f6f9ccbe3990eb', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'dff2523931188fc544d2f353bb6f0c2013d95bbb', class: "onboarding-tip-inner" }, h("div", { key: '61972124a634d6f7a064f96c2edc8b57fcb0415a', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'c61c9ca2cde0c090814250b89787482c6292c7ed', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '6417b11dedbec3305195c26d18ddc53759e3c784', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: '5a52d5848a5d66da35bd73fcd1f89ba98845152c', name: "heading" }))), h("dso-icon-button", { key: '56b079149ffe913f1558e0632b9cecdb1a593f3f', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '61995db5ac91659094e1533683d1faade26ae6d5' }))), h("div", { key: '529c6f717c54ca7e250ce2bb7020afaa74657de0', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

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

@@ -2,6 +2,8 @@ import { Fragment, h } from "@stencil/core";
 import { ToggletipController, isEventOutside } from "../../../../functional-components/tooltip/toggletip.controller";
 import { Tooltip } from "../../../../functional-components/tooltip/tooltip.functional-component";
 /**
+ * Private component, do not use.
+ *
  * @slot - A slot to place the main content inside the toggletip overlay.
  * @slot label - A slot to place the trigger label text of the toggletip.
  */
@@ -54,7 +56,7 @@ export class OzonContentToggletip {
         this.toggletipController.dispose();
     }
     render() {
-        return (h(Fragment, { key: '57bc000d9ae9edf8f0e41c52545686bf19a644e5' }, h("span", { key: '4b0ae2bd310269c4bcb2f999523c4d1360859b5b', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '9d7d66a9cded8985b67003ee9babb76fcfd4f888' }, h("span", { key: '05dbe58544c10df33d5716d9cfd820aa3880556a', class: "toggletip-label" }, h("slot", { key: '7d3fe87c04cd0ee8e25418cba2d977d729bce437', name: "label" })), "\u2060", h("dso-icon", { key: '0d186f4459a5ac8a9a17154dffc139b18cb0eb70', icon: this.icon }))), !this.icon && h("slot", { key: '94f8037c3854965fff3a0579b263924f6e6162a3', name: "label" })), h(Tooltip, { key: '667d087ce9c7c5f0c61fd7eb64b55a3ceff16cbd', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7e5642bb9ecda5e0a1080e14fec75208ec345bf1', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '5aaa2d84764df8d02088f4fe3c77ac13a450fcdd' })))));
+        return (h(Fragment, { key: 'c904990e548e39bbaf0536b323e4f7fb7bceedfc' }, h("span", { key: '9ed93df72734d0a4b470bd14530d94f3e03ed4dc', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '093aabbe693f17a5142bb2483e3c2c8872c31515' }, h("span", { key: '4bbf682d2931ddb1a21cc48048464143dcec72f2', class: "toggletip-label" }, h("slot", { key: '2132768f9d219e11539128cb54f67f5614d07d06', name: "label" })), "\u2060", h("dso-icon", { key: '6a76a783008ed8898cd6973593cf96d1493fa6e6', icon: this.icon }))), !this.icon && h("slot", { key: '9e2cee0a4c059e67247a5469e14bd20f3cb39a5f', name: "label" })), h(Tooltip, { key: 'e638c0b45af8c794cf6b9f49c416f05a89401cf3', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '101cfd0c167b372ad01d2dbeb9c44446ccb3d370', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'ac9c79f49f080692da479ac12c0ce6b5f95a1d47' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/functions/get-eid-from-node.function.js

@@ -0,0 +1,3 @@
+export function getEIdFromNode(node) {
+    return (node instanceof Element && node.getAttribute("eId")) || undefined;
+}