@dso-toolkit/core 102.0.0 → 104.0.0

package/dist/collection/components/table/table.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/table/table.js

@@ -59,7 +59,7 @@ export class Table {
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: '088a2df1a3e73452e86f5fc74aac54b13712655e', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'da51f519add42106e1a1b76f0cf3cd8114bfdae2', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && h("slot", { name: "open-modal-button" })), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        return (h(Host, { key: 'efbf9c4905afc527729bf6d6ae357c61dffaaa91', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'e4b53475e4a33642ee98e82bef38651eaf19353c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && h("slot", { name: "open-modal-button" })), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/tabs/tabs.js

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: '8280a7ae38eb3d447930abc5ba81bb6a032ff41b' }, h("div", { key: '90e5f3a0dd4f9ac5ec7b88bf0ce36ba929e1273d', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '4350663cec6bcaac6891532309d68c1fc182b4e7' })), h("div", { key: 'ef674d380c04f889973b314239d7cb1f666969d3', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'b2df39f8901d250e223686db8996741d6fec5eeb', name: "panel" }))));
+        return (h(Host, { key: '6d0780aac3bd2d5640e018e48e40a5443cd5cf6b' }, h("div", { key: '6161073805ac2b749dce067d686bce92b9e7bc0a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'eb6a324213936fc9a5dbd85e7266159d7059eaa9' })), h("div", { key: '1620e369cf56cac76e00485f6c64c5037e94aef5', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'd2ebac3376122ee3ecfe6521d0a3e969c6b2713d', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tijdreis-banner/tijdreis-banner.js

@@ -5,7 +5,7 @@ import { Fragment, h } from "@stencil/core";
  */
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: '4317cf451c9744a5643cdca73e3e433dee9a98da' }, h("dso-icon", { key: '408e80f9a501225a31795ae2117412409cd32a7e', icon: "clock-outline" }), h("slot", { key: '5d8fc6aa1a40f5b9fc3faa3cfe0f844076961863' }), h("slot", { key: '054c8c7be3f98aa4e158eb0877e330170978d600', name: "button" })));
+        return (h(Fragment, { key: '47492875b4ceb7eae6532aaa484df5f9d63564fb' }, h("dso-icon", { key: 'a506e9ec41cda8ae39b83039bacca0a1da96a091', icon: "clock-outline" }), h("slot", { key: '35e336de613f7b5e5c5b0e4968f34912212925d5' }), h("slot", { key: '5d9e1936e78b576c3a5e47e2cc55beb4f3bf167c', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-view/tree-view.js

@@ -170,7 +170,7 @@ export class TreeView {
         return false;
     }
     render() {
-        return (h("div", { key: '1d778f74240db2d60593166c5d2d0ccf1747ec53', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '376d3f78319872e060ba6210841cb0ad8507094c', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '344ee783cff101cd4ec0957f3c9066fb704f7a0b', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '1d5d37f3f5f151fdd3c0575cda61d348e4e0ba7d', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/truncate/truncate.js

@@ -114,7 +114,7 @@ export class Truncate {
         this.tooltipController.dispose();
     }
     render() {
-        return (h(Host, { key: 'ffabc8c8152408895d6a7c66b56383af14a46b71' }, h("span", { key: 'b831a4489802fb2919da95d2c7958056e08c421c', class: "dso-truncate-content", ref: this.setContentElement, tabindex: this.truncated ? 0 : undefined, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip, onFocus: this.showTooltip, onBlur: this.hideTooltip }, h("slot", { key: 'd1e4de8b7739b49ae30cb089c8c480933e04aaca', ref: (element) => (this.slotElement = element) })), h(Tooltip, { key: '6fd10a229e11a1480c6d0074aecf67dc751925c5', tipElementRef: (element) => (this.tooltipElement = element), tipArrowElementRef: (element) => (this.tooltipArrowElement = element) }, h("div", { key: '876d73b01815c47d1a38b76028841cfccde4c65e', ref: this.setTooltipContentElement, "aria-hidden": "true" }))));
+        return (h(Host, { key: '63a1aefd3b6fb5a35a7239e4518f7546388d9b96' }, h("span", { key: 'ecde4e5fd43c083bcb43339a0d9e7aecd187475b', class: "dso-truncate-content", ref: this.setContentElement, tabindex: this.truncated ? 0 : undefined, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip, onFocus: this.showTooltip, onBlur: this.hideTooltip }, h("slot", { key: '8d9680318df35114d80dde6b33d9fc8666979c7a', ref: (element) => (this.slotElement = element) })), h(Tooltip, { key: 'f131d00b7c176c50541dcde0b916d7228565a811', tipElementRef: (element) => (this.tooltipElement = element), tipArrowElementRef: (element) => (this.tooltipArrowElement = element) }, h("div", { key: '567fab88c49cbac49369095a2f30c99f7e9519bd', ref: this.setTooltipContentElement, "aria-hidden": "true" }))));
     }
     static get is() { return "dso-truncate"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -241,57 +241,36 @@ slot[name=legend] {
 }
 
 @media screen and (min-width: 1032px) {
-  :host(:not([print])[main-size=small]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
+  :host(:not([print])[main-size=small]) .dso-main-panel {
     flex-basis: 375px;
     min-inline-size: 0;
     max-inline-size: 375px;
   }
-}
-@media screen and (min-width: 1032px) and (max-width: 375px) {
-  :host(:not([print])[main-size=small]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
-    flex-basis: 100vw;
-    max-inline-size: 100vw;
-    min-inline-size: 0;
-    transition: none;
-  }
-}
-@media screen and (min-width: 1032px) {
-  :host(:not([print])[main-size=medium]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
+  :host(:not([print])[main-size=medium]) .dso-main-panel {
     flex-basis: 624px;
     min-inline-size: 375px;
     max-inline-size: 624px;
   }
-}
-@media screen and (min-width: 1032px) and (max-width: 624px) {
-  :host(:not([print])[main-size=medium]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
-    flex-basis: 100vw;
-    max-inline-size: 100vw;
-    min-inline-size: 375px;
-    transition: none;
-  }
-}
-@media screen and (min-width: 1032px) {
-  :host(:not([print])[main-size=large]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=large]) .dso-document-panel {
+  :host(:not([print])[main-size=large]) .dso-main-panel {
     flex-basis: 60%;
     min-inline-size: 768px;
     max-inline-size: 1024px;
   }
-}
-@media screen and (min-width: 1032px) and (max-width: 768px) {
-  :host(:not([print])[main-size=large]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
+    flex-basis: 25%;
+    min-inline-size: 375px;
+    max-inline-size: 623px;
+  }
+  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
+    flex-basis: 40%;
+    min-inline-size: 624px;
+    max-inline-size: 1024px;
+  }
   :host(:not([print])[document-panel-size=large]) .dso-document-panel {
-    flex-basis: 100vw;
-    max-inline-size: 100vw;
+    flex-basis: 60%;
     min-inline-size: 768px;
-    transition: none;
+    max-inline-size: 1200px;
   }
-}
-@media screen and (min-width: 1032px) {
   :host(:not([print])) .dso-main-panel.compact,
   :host(:not([print])) .dso-main-panel.expanded {
     flex-basis: unset;
@@ -478,7 +457,7 @@ slot[name=legend] {
     padding-block: 11px;
     padding-inline: 15px;
   }
-  .dso-tertiary:hover {
+  .dso-tertiary:hover, .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);
@@ -490,7 +469,7 @@ slot[name=legend] {
     color: var(--_dso-button-tertiary-active-color, #173521);
     float: var(--_dso-button-float-tertiary, none);
   }
-  .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
+  .dso-tertiary[disabled], .dso-tertiary[disabled]:hover, .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);
@@ -539,7 +518,7 @@ slot[name=legend] {
   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
     color: #39870c;
   }
-  .dso-tertiary:not([disabled]):hover {
+  .dso-tertiary:not([disabled]):hover, .dso-tertiary:not([disabled]):active {
     text-decoration: underline;
     text-underline-position: under;
   }

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -160,9 +160,9 @@ export class ViewerGrid {
     }
     render() {
         const tabs = viewerGridTabs.filter((tab) => tab !== "document" || this.documentPanelOpen);
-        return (h(Fragment, { key: 'f5253f257aeb6718a721f21daf0fb9115285ee44' }, h("slot", { key: 'f7094c3d7b45e9a2ec4d8ee67c7708a3b62a2b4c', name: "top-bar" }), h("div", { key: 'd86d1f3e8093fbbe9465558d177dc5b931fd0b5e', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '49b586ca57ed12d0e73156c2f9a73f4bff522e8d', class: "dso-navbar" }, h("ul", { key: '7c7d501187a983742ed31d780cfafdbddda14a6f', class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", "aria-current": this.activeTab === tab ? "page" : undefined, onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: '494b784d40887fdc7edee3c0485a3d19f08c8ea7', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.tabView ? false : this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: '6401d836098f249306dd75269e9a8b76fe9c048a', class: "map-area" }, h("div", { key: '6872f89d29b98e8c8c1214d7fed2d96f46a3df5f', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '6c2ed87cb363acde7ee10bbb036fe5b8eadd74e5', name: "map" })), h("slot", { key: '0bb35726b8b0270060d3261c1aa2bac760c7a1e5', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
+        return (h(Fragment, { key: '96c242cdde1a4bb41752f3d98ead62aad3790977' }, h("slot", { key: '95d49eebce481289dac6206f5b2249b4b6a37b17', name: "top-bar" }), h("div", { key: '630d2b18a05801b840210cd0965cab0ddfd2e42b', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '83f8a63abaddbf10e5ff6a28f9e53296c213c54c', class: "dso-navbar" }, h("ul", { key: '0323c650722fb070efff99cb9c2007acc8707e4d', class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", "aria-current": this.activeTab === tab ? "page" : undefined, onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: '8e210d40820dff9f7eb641540fba03a0bb217125', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.tabView ? false : this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: '02fd34a6f02f091f1469b06523ba30bb305995c6', class: "map-area" }, h("div", { key: '74127720fa459c20a276f3e9ff5601ead4272701', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '036b54fe0281d61bb87722ac928ed6070a29bd5d', name: "map" })), h("slot", { key: '9ed121e18508ecdb77b5cd00c37742b631e9b4c9', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
             (this.tabView && this.activeTab === "document" && this.documentPanelOpen) ||
-            this.print) && (h(DocumentPanel, { key: '2d6f27dbdd3df5e802bf438174be59afc1a1915d', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '14ab389cbf9060922b69c7f96c162a13b963d17f', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+            this.print) && (h(DocumentPanel, { key: '1bfef6321df9365a25e1d1dab9126cadea8df837', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'ce8e51f24a2c6a7a20de9648b1555d8edb8362d4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }