@dnb/eufemia 10.4.2 → 10.6.0

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.css

@@ -1,7 +1,4 @@
 @charset "UTF-8";
-/*
- * Utilities
- */
 /*
  * Anchor mixins
  *
@@ -11,94 +8,134 @@
  */
 .dnb-anchor {
   --anchor-underline-thickness: 0.125rem;
+  --anchor-background: transparent;
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   -webkit-text-decoration-color: var(--sb-color-green-dark);
           text-decoration-color: var(--sb-color-green-dark);
-  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
+  padding: 0.15625em 0;
+  border-radius: 0.5em;
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background);
+}
+.dnb-anchor--no-underline, .dnb-anchor--has-icon, .dnb-anchor--inline {
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), -0.25em 0 0 0 var(--anchor-background), 0.25em 0 0 0 var(--anchor-background);
 }
 .dnb-anchor:hover {
+  --anchor-background: var(--sb-color-green-dark);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
   transition: none;
-  border-radius: 0.5rem;
+  border-radius: 0.5em;
 }
 .dnb-anchor:active {
+  --anchor-background: var(--sb-color-green);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-  border-radius: 0.5rem;
+  transition: none;
+  border-radius: 0.5em;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus-visible {
+  color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
+  border-radius: 0.25em;
 }
-.dnb-anchor:focus.dnb-anchor--icon-left {
+.dnb-anchor.focus-visible.dnb-anchor--icon-left {
   margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor:focus-visible.dnb-anchor--icon-left {
   margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-right {
+.dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor.focus-visible.dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor:focus-visible.dnb-anchor--icon-right {
   margin-right: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
-.dnb-anchor.dnb-anchor--icon-left {
-  padding-left: 0;
+.dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
+.dnb-anchor--icon-left {
   margin-left: 1.125em;
 }
-.dnb-anchor.dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor--icon-left .dnb-icon {
   font-size: 1em;
   margin-right: 0.125em;
   margin-left: -1.125em;
 }
-.dnb-anchor.dnb-anchor--icon-right {
-  padding-right: 0;
+.dnb-anchor--icon-right {
   margin-right: 1.125em;
 }
-.dnb-anchor.dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor--icon-right .dnb-icon {
   font-size: 1em;
   margin-left: 0.125em;
   margin-right: -1.125em;
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left) {
-  padding-left: 0;
+.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon) {
+  padding-right: 0.25em;
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left)::before {
-  content: " ";
+.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon)::after {
+  position: initial;
+  display: inline-block;
+  width: 1.275em;
+  height: 0.9em;
+  line-height: 0.9em;
+  margin-left: 0;
+  margin-right: 0;
+  background-position: right;
+  background-size: contain;
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]) {
-  padding-right: 0;
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-left)::before {
+  -webkit-text-decoration-color: var(--sb-color-green-dark);
+          text-decoration-color: var(--sb-color-green-dark);
+  content: " ";
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank])::after {
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-right)::after {
+  -webkit-text-decoration-color: var(--sb-color-green-dark);
+          text-decoration-color: var(--sb-color-green-dark);
   content: " ";
 }
 
 .dnb-anchor--hover {
+  --anchor-background: var(--sb-color-green-dark);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
   transition: none;
-  border-radius: 0.5rem;
+  border-radius: 0.5em;
 }
 
 .dnb-anchor--active {
+  --anchor-background: var(--sb-color-green);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-  border-radius: 0.5rem;
+  transition: none;
+  border-radius: 0.5em;
 }
 
 .dnb-anchor--focus {
+  background-color: transparent;
+  transition: none;
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  border-radius: 0.25em;
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: var(--sb-color-blue-light-3);
+.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
+  text-decoration: none;
 }
 .dnb-anchor--focus.dnb-anchor--icon-left {
   margin-left: 0;
@@ -113,28 +150,44 @@
   margin-right: 0;
 }
 
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
+  border-radius: 0;
+}
+
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
 
+.dnb-anchor--inline {
+  -webkit-text-decoration-color: currentcolor;
+          text-decoration-color: currentcolor;
+}
+
 .dnb-anchor--contrast {
   color: var(--color-white);
 }
-.dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+.dnb-anchor--contrast:hover {
+  color: var(--sb-color-text);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.min.css

@@ -1 +1 @@
-@charset "UTF-8";.dnb-anchor{--anchor-underline-thickness:0.125rem;color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:calc((var(--line-height-basis) - 1.2em)/2) .25em;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor:hover{background-color:var(--sb-color-green-dark);transition:none}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor:active{background-color:var(--sb-color-green)}.dnb-anchor:focus{border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor:focus,.dnb-anchor:focus:not(:active){background-color:var(--sb-color-blue-light-3)}.dnb-anchor:focus.dnb-anchor--icon-left,.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor:focus.dnb-anchor--icon-right,.dnb-anchor:focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor.dnb-anchor--icon-left{margin-left:1.125em;padding-left:0}.dnb-anchor.dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}.dnb-anchor.dnb-anchor--icon-right{margin-right:1.125em;padding-right:0}.dnb-anchor.dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left){padding-left:0}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left):before{content:" "}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]){padding-right:0}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]):after{content:" "}.dnb-anchor--hover{background-color:var(--sb-color-green-dark);transition:none}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor--active{background-color:var(--sb-color-green)}.dnb-anchor--focus{border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--focus,.dnb-anchor--focus:not(:active){background-color:var(--sb-color-blue-light-3)}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+@charset "UTF-8";.dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor--has-icon,.dnb-anchor--inline,.dnb-anchor--no-underline{box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),-.25em 0 0 0 var(--anchor-background),.25em 0 0 0 var(--anchor-background)}.dnb-anchor:hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor:active{--anchor-background:var(--sb-color-green)}.dnb-anchor.focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}.dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}.dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}.dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}.dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}.dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}.dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--icon-left{margin-left:1.125em}.dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}.dnb-anchor--icon-right{margin-right:1.125em}.dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){padding-right:.25em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-position:100%;background-size:contain;display:inline-block;height:.9em;line-height:.9em;margin-left:0;margin-right:0;position:static;width:1.275em}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-left):before,.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor--hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor--active{--anchor-background:var(--sb-color-green)}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{text-decoration:none}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--sb-color-text)}.dnb-anchor--contrast:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-anchor--contrast.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss

@@ -1,29 +1,25 @@
-@use '../../../../style/core/utilities.scss';
 @use '../anchor-mixins.scss';
 
 @mixin anchorHover() {
+  --anchor-background: var(--sb-color-green-dark);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
 
   transition: none;
-  border-radius: 0.5rem;
+  border-radius: 0.5em;
 }
 
 @mixin anchorActive() {
+  --anchor-background: var(--sb-color-green);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
 
-  border-radius: 0.5rem;
+  transition: none;
+  border-radius: 0.5em;
 }
 
 @mixin anchorFocus() {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.25rem;
-
-  &:not(:active) {
-    background-color: var(--sb-color-blue-light-3);
-  }
+  border-radius: 0.25em;
 
   &.dnb-anchor--icon-left {
     margin-left: 0;
@@ -42,15 +38,28 @@
 
 .dnb-anchor {
   --anchor-underline-thickness: 0.125rem;
+  --anchor-background: transparent;
 
   // Has to use --sb-font-weight-bold to get correct weighting as --sb-font-weight-medium does nothing at the moment
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   text-decoration-color: var(--sb-color-green-dark);
-  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
+  padding: 0.15625em 0;
+  border-radius: 0.5em;
 
   $anchor-icon-gutter: 0.125em;
 
+  @include anchor-mixins.anchorBackground(var(--anchor-background), null);
+
+  &--no-underline,
+  &--has-icon,
+  &--inline {
+    @include anchor-mixins.anchorBackground(
+      var(--anchor-background),
+      0.25em
+    );
+  }
+
   &:hover {
     @include anchorHover();
   }
@@ -59,12 +68,11 @@
     @include anchorActive();
   }
 
-  &:focus {
+  &:focus-visible {
     @include anchorFocus();
   }
 
-  &.dnb-anchor--icon-left {
-    padding-left: 0;
+  &--icon-left {
     margin-left: 1em + $anchor-icon-gutter;
 
     .dnb-icon {
@@ -74,8 +82,7 @@
     }
   }
 
-  &.dnb-anchor--icon-right {
-    padding-right: 0;
+  &--icon-right {
     margin-right: 1em + $anchor-icon-gutter;
 
     .dnb-icon {
@@ -85,17 +92,31 @@
     }
   }
 
-  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash) {
+  &[target='_blank']:not(:empty, .dnb-anchor--no-icon) {
+    padding-right: 0.25em;
+    &::after {
+      position: initial;
+      display: inline-block;
+      width: calc(0.9em + 0.25em + 0.125em);
+      height: 0.9em;
+      line-height: 0.9em;
+      margin-left: 0;
+      margin-right: 0;
+      background-position: right;
+      background-size: contain;
+    }
+  }
+
+  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style) {
     &:not(.dnb-anchor--icon-left) {
-      padding-left: 0;
       &::before {
+        text-decoration-color: var(--sb-color-green-dark);
         content: '\00a0';
       }
     }
-
-    &:not(.dnb-anchor--icon-right):not(.dnb-anchor[target='_blank']) {
-      padding-right: 0;
+    &:not(.dnb-anchor--icon-right) {
       &::after {
+        text-decoration-color: var(--sb-color-green-dark);
         content: '\00a0';
       }
     }
@@ -111,6 +132,7 @@
 }
 
 .dnb-anchor--focus {
+  @include anchor-mixins.anchorFocusStyle();
   @include anchorFocus();
 }
 
@@ -118,7 +140,11 @@
   @include anchor-mixins.resetBorderRadius();
 }
 
+.dnb-anchor--inline {
+  text-decoration-color: currentcolor;
+}
+
 // TODO: add correct contrast styling when designs are in place
 .dnb-anchor--contrast {
-  @include anchor-mixins.useAnchorContrastStyle();
+  @include anchor-mixins.useAnchorContrastStyle(var(--sb-color-text));
 }

package/components/anchor/style/themes/dnb-anchor-theme-ui.css

@@ -8,7 +8,7 @@
 .dnb-anchor {
   color: var(--color-sea-green);
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor:hover {
   color: var(--color-sea-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
 }
@@ -16,7 +16,10 @@
   color: var(--color-mint-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor.focus-visible {
+  color: var(--color-sea-green);
+}
+.dnb-anchor:focus-visible {
   color: var(--color-sea-green);
 }
 
@@ -30,28 +33,35 @@
   box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
 
-.dnb-anchor--focus:not(:active) {
+.dnb-anchor--focus {
   color: var(--color-sea-green);
 }
 
 .dnb-anchor--contrast {
   color: var(--color-white);
 }
-.dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
+.dnb-anchor--contrast:hover {
   color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);

package/components/anchor/style/themes/dnb-anchor-theme-ui.min.css

@@ -1 +1 @@
-.dnb-anchor{color:var(--color-sea-green)}.dnb-anchor:active,.dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-mint-green-50),-.125em 0 0 0 var(--color-mint-green-50),.125em 0 0 0 var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-anchor:active{box-shadow:inset 100vw 100vw 0 0 var(--color-emerald-green),-.125em 0 0 0 var(--color-emerald-green),.125em 0 0 0 var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--hover,.dnb-anchor:focus:not(:active){color:var(--color-sea-green)}.dnb-anchor--hover{box-shadow:inset 100vw 100vw 0 0 var(--color-mint-green-50),-.125em 0 0 0 var(--color-mint-green-50),.125em 0 0 0 var(--color-mint-green-50)}.dnb-anchor--active{box-shadow:inset 100vw 100vw 0 0 var(--color-emerald-green),-.125em 0 0 0 var(--color-emerald-green),.125em 0 0 0 var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--focus:not(:active){color:var(--color-sea-green)}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-anchor,.dnb-anchor:hover{color:var(--color-sea-green)}.dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-mint-green-50),-.125em 0 0 0 var(--color-mint-green-50),.125em 0 0 0 var(--color-mint-green-50)}.dnb-anchor:active{box-shadow:inset 100vw 100vw 0 0 var(--color-emerald-green),-.125em 0 0 0 var(--color-emerald-green),.125em 0 0 0 var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor.focus-visible{color:var(--color-sea-green)}.dnb-anchor:focus-visible{color:var(--color-sea-green)}.dnb-anchor--hover{box-shadow:inset 100vw 100vw 0 0 var(--color-mint-green-50),-.125em 0 0 0 var(--color-mint-green-50),.125em 0 0 0 var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-anchor--active{box-shadow:inset 100vw 100vw 0 0 var(--color-emerald-green),-.125em 0 0 0 var(--color-emerald-green),.125em 0 0 0 var(--color-emerald-green);color:var(--color-mint-green)}.dnb-anchor--focus{color:var(--color-sea-green)}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-anchor--contrast.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}

package/components/anchor/style/themes/dnb-anchor-theme-ui.scss

@@ -3,8 +3,7 @@
 @mixin anchorStyle() {
   color: var(--color-sea-green);
 
-  &:hover,
-  &:active {
+  &:hover {
     color: var(--color-sea-green);
     @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
   }
@@ -14,10 +13,8 @@
     @include anchor-mixins.anchorBackground(var(--color-emerald-green));
   }
 
-  &:focus {
-    &:not(:active) {
-      color: var(--color-sea-green);
-    }
+  &:focus-visible {
+    color: var(--color-sea-green);
   }
 }
 
@@ -38,9 +35,7 @@ $useClasses: true !default;
   }
 
   .dnb-anchor--focus {
-    &:not(:active) {
-      color: var(--color-sea-green);
-    }
+    color: var(--color-sea-green);
   }
 
   .dnb-anchor--contrast {

package/components/autocomplete/Autocomplete.js

@@ -1198,7 +1198,7 @@ class AutocompleteInstance extends React.PureComponent {
       }, ariaLiveDelay);
     }
   }
-  getVocieOverActiveItem(selected_sr) {
+  getVoiceOverActiveItem(selected_sr) {
     if (IS_MAC) {
       const {
         active_item,
@@ -1461,7 +1461,7 @@ class AutocompleteInstance extends React.PureComponent {
       className: "dnb-autocomplete__suffix",
       id: id + '-suffix',
       context: props
-    }, suffix))), this.getVocieOverActiveItem(selected_sr), React.createElement("span", {
+    }, suffix))), this.getVoiceOverActiveItem(selected_sr), React.createElement("span", {
       className: "dnb-sr-only",
       "aria-live": "assertive"
     }, ariaLiveUpdate));