@dso-toolkit/core 102.0.0 → 104.0.0

package/dist/collection/components/document-component/document-component.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);
 }
 
@@ -1145,7 +1254,7 @@ mark.dso-highlight {
   --_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;
@@ -1193,7 +1302,7 @@ mark.dso-highlight {
   --_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/document-component/document-component.js

@@ -149,6 +149,23 @@ export class DocumentComponent {
     get wijzigactieLabel() {
         return this.wijzigactie && wijzigactieLabels[this.wijzigactie];
     }
+    /**
+     * Returns the rendered element of the STOP element with the given `eId` in the Kop or Inhoud of this Document
+     * Component, or `undefined` when it is not rendered (e.g. when the Document Component is closed). Nested Document
+     * Components are not searched.
+     *
+     * @param eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`.
+     */
+    async getElementByEId(eId) {
+        const ozonContents = Array.from(this.host.shadowRoot?.querySelectorAll("dso-ozon-content") ?? []);
+        for (const ozonContent of ozonContents) {
+            const element = await ozonContent.getElementByEId(eId);
+            if (element) {
+                return element;
+            }
+        }
+        return undefined;
+    }
     showBadge() {
         return !!this.badge && ((!this.open && this.mode === "document") || this.mode === "table-of-contents");
     }
@@ -189,17 +206,17 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: '4be20ab7aee103b4fa74716e330d8f3bb303a7a2', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ad0bb0c895f034617dcebb0b7a5e169e275933cd', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '019af6b3cd888664dcb3a61c56ef370aac23e6b9', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '3332aa7cd5bc63f595efaf28f8e85c47223b9388', class: "heading" }, h(Heading, { key: '4a9eb6dcafff4f27dc54adb9e25f256d93807a19', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '99d66b2be1f939c7351ce161855476b2603d64c1', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: 'ae0f71c453c4b355e019f26c887dac9c2bf28e21' }, this.notApplicable && h("span", { key: 'dc88588bf92a9a427aef1b0357e1cc5dd6b81fb6', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'c8c11b3cb466776aa48f83c6fb7465cee27d0998', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '64c3a71fad6bbbe6189201864b824266b5a1576b', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'c9636820ae958525d71476f9de0419c000635535' }, h("dso-badge", { key: '3c700b6a68b9b658804ade20c189ed20f8356a54', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '7a1356ab6bbe892c09a194434d9b87090c275461', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '15039b5537c26a4821f8cfb193fce8c576e05687', class: "addons" }, this.label && (h("dso-label", { key: '1c04e2cb9d47a420a352f1d230440886360f8228', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'e91a3f5347d50a2fc1b5c9e16978dccb92188180', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
+        return (h(Host, { key: '05af9168ffda715965eaba35704b07f9de4561b3', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '78f338239147413df1d6d76a3cd7f7549cfe641d', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'c84e82557b445e56e08b82007181bcb7be27b159', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'be2397261bf865bbc177dda2472ebcdb4503fcac', class: "heading" }, h(Heading, { key: 'd5336abcabe851f2322f4a2ae503494130a1fbd8', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '89e490d03eb96b4e3359d92c04e7ae27c0455eff', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '817605bfe7797c514026ed197fd0b5e4432f1631' }, this.notApplicable && h("span", { key: 'dc659ed325646a1e009fe402dd6f77fbcb305a60', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '3f59789fbdaec36ecdf573d1511afba85e0cbc48', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'e1c7c30368afab10393303fac8de8cd32f453255', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '4c3f1f4db4f0769ca94138e320f65eda3a39bd81' }, h("dso-badge", { key: 'd5134e95ae47027c2ccf1541df8464cdb71e3dac', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '5ccb955eb18e79e7220cce2eb38167728b672d4f', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '685656f6513e240c46ee4ea7ef08e9e905526b27', class: "addons" }, this.label && (h("dso-label", { key: '6c87f0e9484b581b9d9b47b93fd3b2fb359beb3b', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'e82f81c206987a9fe556b0eb937bd7c9ab0f040c', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
                 current: this.openAnnotation,
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: '38471391f4abddc9ac61665449e58e32fb8a349d', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'fe3aa98ca07fe542470d00c97114ae049fc7505a', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: '075a41ffb5f2c984ea6f8a523c649219498f53dc', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'be2b41946539c18e6c33646a785875b89a42121b', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'abd850d5dc9968e99eddd82dd83d910a6a5d9c4c', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '1fa41e97bcf08136c9bf04d45ceb17bc4890e011', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '0724d483c74eb4d9a5bf98df1334a43c226dcf55', class: "content", part: "_content" }, h(AantekenAlert, { key: 'a0aa3ed13249655d663eb00e8fe4251c6beaefd4', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '9c66a737d583952bcf446069e946eb80d5874e5e', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'f35afe9004c21d7a273b981473ff2503b2d4c42d', class: "children-container", part: "_children-container" }, h("slot", { key: '701ae6f0277914e8580c0591a73812c46dbd2f33' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '1b4b431d41764df6d983c184dc28fe626301ddff', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '0dfe316455dbddfd224125598a6d774dcb649565', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '7cbb6e8c8ff63926c969570991dc71f295ff4d6a', class: "content", part: "_content" }, h(AantekenAlert, { key: '71eac95537aad98792ab9a0e88eda74bbbb7b933', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '54d4957b8e7633e4ad29b5890ffee5e5f5e935e9', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'bb4a06b75566e4cd3c32a78cbb66ec21c92cec85', class: "children-container", part: "_children-container" }, h("slot", { key: 'f4d6df1a465472b77b411693b2d46b13c1408579' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }
@@ -926,5 +943,37 @@ export class DocumentComponent {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getElementByEId": {
+                "complexType": {
+                    "signature": "(eId: string) => Promise<HTMLElement | undefined>",
+                    "parameters": [{
+                            "name": "eId",
+                            "type": "string",
+                            "docs": "The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement | undefined>"
+                },
+                "docs": {
+                    "text": "Returns the rendered element of the STOP element with the given `eId` in the Kop or Inhoud of this Document\r\nComponent, or `undefined` when it is not rendered (e.g. when the Document Component is closed). Nested Document\r\nComponents are not searched.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`."
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/document-component-demo/document-component.demo.js

@@ -70,7 +70,7 @@ export class DocumentComponentDemo {
             }
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" }), h("dso-label", { slot: "meta", status: "warning", compact: true }, "gewijzigde locatie")))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
         };
         this.MenuButton = ({ documentComponent }) => {
             const { type } = documentComponent;
@@ -207,7 +207,7 @@ export class DocumentComponentDemo {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '325c3f0c6cae4feecaf9e01fe74fc602a653f137', class: "dso-document-components" }, h("div", { key: 'df6ff8a61e2fefc28b9dace9ea88fcc2b6f0009e', class: "dso-navbar" }, h("ul", { key: '6b44f5260a57c2a296068aa9d122c31e3d8d6502', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'fd300e2da9b2e29b46e29c3108e78f609e8b4e40', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'b79655f9c08bd2dd24761bb769cccb441ef11c01', class: "dso-document-components" }, h("div", { key: 'c40ddaad46f22defa626c174109128a346fe7b63', class: "dso-navbar" }, h("ul", { key: '844a9ebcb3693e00c5ce1b5da5cc989050fb90fa', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '46ee8e9d0e26b940323f951eb7ab746816054ce8', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.js

@@ -17,7 +17,7 @@ export class DropdownMenuGroup {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const labelId = this.label ? uuidv4() : undefined;
-        return (h(Host, { key: '828445e3fce42f05e8821882721607aa830df4f3' }, h("div", { key: '3e6056d9280593d15dbc3bb5b8d429a09b41594a', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '48d604d2cf034f3c59badd6805da5cd848b64e6e', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '04b6137e817c71ac38a2c0a12957da78951823c7' }))));
+        return (h(Host, { key: 'cb0027f2d0b0abb79fade328eb567e184900c077' }, h("div", { key: 'c8f67e7347e7fbc08355da9514f3298a84e98800', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: 'ba5bb5e5cfe65ae66e81cd893a90b7d9ff05a201', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: 'df0be98b7e14b07269f82af471e73a050b56091b' }))));
     }
     static get is() { return "dso-dropdown-menu-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.css

@@ -74,6 +74,7 @@ button:focus-visible,
   background-color: #d7e7ce;
   color: #191919;
   text-decoration: none;
+  outline-offset: -2px;
 }
 a:active,
 button:active {

package/dist/collection/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.js

@@ -6,6 +6,10 @@ import { isModifiedEvent } from "../../../utils/is-modified-event";
  */
 export class DropdownMenuItem {
     constructor() {
+        // Focus follows the mouse, so hover and focus never highlight different items at the same time.
+        this.handleMouseEnter = () => {
+            this.anchorOrButtonRef?.focus({ preventScroll: true });
+        };
         this.handleClick = (event) => {
             this.dsoClick.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event) });
         };
@@ -28,7 +32,7 @@ export class DropdownMenuItem {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const checked = checkable ? Boolean(this.checked) : undefined;
-        return (h(Host, { key: '3e62950ca227a74a180bf1f945f8221a2b9ac0fd' }, h("div", { key: '3a343d69e9fce9a4ef288798a03a6b475d9fe70f', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'fa7dc161a2f76eb3c8cc5cc6612270c9fc48ed34', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'a3cd2eefa6c8285fedef6d6a5141130b9000c9a7', icon: "check" }), h("slot", { key: 'd322c46f64ffdeb30b0fe3d789d7d928e635f8dc' }))), this.type === "link" && this.href && (h("a", { key: '067d0ea97bcca792a7e3e21b8958ba7d3a095e58', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '1b1a699d1de520faef59c3e2ea0db73a1b3102b6', icon: "check" }), h("slot", { key: '43c6db81a62db3367081ceb256b370ed726159f3' }))))));
+        return (h(Host, { key: 'cb6d774c1cb5d92f2cde98da953eedcac7f3451d' }, h("div", { key: 'd28eaf71b07fce1d81f9b3fdf6ba305832dd6de6', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: '914415a87dacbf12795b85947201fc06478a85a5', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '0d102dfcdef690a0f49ba3bb367bda5f9856b571', icon: "check" }), h("slot", { key: 'db7da87dd982eea3367cb780a8fead9713793f40' }))), this.type === "link" && this.href && (h("a", { key: 'e25173491fe4ce38f805b990806c0ad405c85fa7', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '077315bdb99f7c36c8ef02280d499f03f2693091', icon: "check" }), h("slot", { key: 'bfef832e72c5c323c313fe3a315737ac948375db' }))))));
     }
     static get is() { return "dso-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }