@dso-toolkit/core 103.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-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/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/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: '35db8f7dac260f7f500ab96976be56737d027104' }, h("span", { key: 'efd6bf9f2c597133da2b146f7ef44fcaa422db4b', "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: 'ac6a026986665e7c99e5f755000be344ae47062a' }, h("span", { key: '44adca9d9bf5b9285c63a71474c137202220aba4', class: "toggletip-label" }, h("slot", { key: '51e57f67a81aace39e01a9685acfeab00bbec9c3', name: "label" })), "\u2060", h("dso-icon", { key: 'cc5cdb8bdd5cc5ec526f1ffb75a9980ff77723e7', icon: this.icon }))), !this.icon && h("slot", { key: '2a4eef2f4320018be5165d8362fba7e73749d2a7', name: "label" })), h(Tooltip, { key: '49af934379fd968d136383f6f7681713597aee0e', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7890204f0691d89482f9bb9c8070d88afcd42da6', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '3137fadff1b5b01b3a03ec795ac99752bc3827b9' })))));
+        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"; }