@dnb/eufemia 10.4.1 → 10.5.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.5.0](https://github.com/dnbexperience/eufemia/compare/v10.4.2...v10.5.0) (2023-08-10)
+
+
+### :bug: Bug Fixes
+
+* **Modal:** removes attr data-dnb-modal-active from document.body ([#2547](https://github.com/dnbexperience/eufemia/issues/2547)) ([b831454](https://github.com/dnbexperience/eufemia/commit/b8314545b4fbd132d97a1c6b0a701ff1b4a5dda7))
+
+
+### :sparkles: Features
+
+* **Anchor:** focus-visible and test coverage ([#2521](https://github.com/dnbexperience/eufemia/issues/2521)) ([d07e9b0](https://github.com/dnbexperience/eufemia/commit/d07e9b04f07f00a86ec3a99b87c03499a0735c69))
+* **Dialog:** add hideConfirm-prop ([5029982](https://github.com/dnbexperience/eufemia/commit/50299824a4370243921b1cc0d3a378dea2146e54))
+
+## [10.4.2](https://github.com/dnbexperience/eufemia/compare/v10.4.1...v10.4.2) (2023-07-27)
+
+
+### :bug: Bug Fixes
+
+* **Tabs:** fix error with a single Tabs.Content as children ([#2534](https://github.com/dnbexperience/eufemia/issues/2534)) ([215e52c](https://github.com/dnbexperience/eufemia/commit/215e52c7eb1e4c4cd2c2cdf5a4f1b9b8e1f2adfc))
+
 ## [10.4.1](https://github.com/dnbexperience/eufemia/compare/v10.4.0...v10.4.1) (2023-07-25)
 
 

package/cjs/components/anchor/style/anchor-mixins.scss

@@ -52,7 +52,7 @@
   &,
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     border-radius: 0;
   }
 }
@@ -91,20 +91,16 @@
   }
 }
 
-@mixin anchorFocusStyle($whatinput: null) {
-  &:not(:active) {
-    background-color: transparent;
+@mixin anchorFocusStyle() {
+  background-color: transparent;
 
-    @include resetAnimationStyle();
-    @include resetUnderlineStyle();
-  }
+  @include resetAnimationStyle();
+  @include resetUnderlineStyle();
+
+  @include focusRing('always');
 
-  @if $whatinput {
-    @include focusRing($whatinput);
-  } @else {
-    @include focusRing();
-  }
   border-radius: 0.25em;
+  @content;
 }
 
 @mixin anchorBackground($color) {
@@ -116,23 +112,22 @@
 @mixin useAnchorContrastStyle($contrastColor: var(--color-emerald-green)) {
   color: var(--color-white);
 
-  &:hover,
-  &:active {
+  &:hover {
     color: $contrastColor;
-    background-color: var(--color-white);
-    text-decoration: none;
+    @include anchorBackground(var(--color-white));
   }
 
   &:active {
-    color: $contrastColor;
-    background-color: var(--color-white);
+    color: var(--color-white);
+    background-color: transparent;
+    @include anchorBackground(transparent);
   }
 
-  &:not(:disabled):focus {
+  &:focus-visible {
     color: var(--color-white);
     background-color: transparent;
 
-    @include focusRing(null, var(--color-white));
+    @include focusRing('always', var(--color-white));
   }
 }
 
@@ -181,12 +176,11 @@
   @include anchorDefaultStyle();
 
   // have focus before :active, because of border-radius
-  &:focus {
+  &:focus-visible {
     @include anchorFocusStyle();
   }
 
-  &:hover,
-  &:active {
+  &:hover {
     @include anchorHoverStyle();
   }
 

package/cjs/components/anchor/style/dnb-anchor.css

@@ -37,27 +37,36 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor {
   font-size: inherit;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
+  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;
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
-}
-.dnb-anchor:focus:not(:active), .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor {
-  text-decoration: none;
-}
-html[data-whatinput=keyboard] .dnb-anchor:focus {
+  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;
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor.focus-visible, .dnb-section .dnb-anchor.focus-visible.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:hover {
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor:active {
@@ -114,6 +123,8 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 }
 
 .dnb-anchor--focus {
+  background-color: transparent;
+  transition: none;
   outline: none;
   --border-color: var(--focus-ring-color);
   --border-width: var(--focus-ring-width);
@@ -121,11 +132,7 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   border-color: transparent;
   border-radius: 0.25em;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: transparent;
-  transition: none;
-}
-.dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
+.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
   text-decoration: none;
 }
 
@@ -150,7 +157,11 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   background-color: transparent;
 }
 
-.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;
 }
 

package/cjs/components/anchor/style/dnb-anchor.min.css

@@ -1 +1 @@
-button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out}sub .dnb-anchor,sup .dnb-anchor{padding:0 .025em}.dnb-h--basis .dnb-anchor,.dnb-h--large .dnb-anchor,.dnb-h--medium .dnb-anchor,.dnb-h--small .dnb-anchor,.dnb-h--x-large .dnb-anchor,.dnb-h--x-small .dnb-anchor,.dnb-h--xx-large .dnb-anchor,.dnb-lead .dnb-anchor,.dnb-p .dnb-anchor{font-size:inherit}.dnb-anchor:focus{border-radius:.25em;outline:none}.dnb-anchor:focus:not(:active){background-color:transparent;transition:none}.dnb-anchor:focus:not(:active),.dnb-section .dnb-anchor:focus:not(:active).dnb-anchor{text-decoration:none}html[data-whatinput=keyboard] .dnb-anchor:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.25em}.dnb-anchor:active,.dnb-anchor:hover,.dnb-section .dnb-anchor:active.dnb-anchor,.dnb-section .dnb-anchor:hover.dnb-anchor{text-decoration:none}.dnb-anchor:active{border-radius:.25em}.dnb-anchor:active,.dnb-section .dnb-anchor:active.dnb-anchor{text-decoration:none}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiMwMDcyNzIiLz48L3N2Zz4=");background-size:0;position:relative}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-image:inherit;background-size:cover;color:inherit;content:"";display:inline-block;height:.889em;margin-left:.3em;margin-right:.125em;position:relative;transform-origin:bottom;transition:transform .3s ease-out,filter 1s ease-in-out;width:.889em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiNhNWUxZDIiLz48L3N2Zz4=")}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{top:.125em}[data-visual-test-wrapper] .dnb-anchor{transition:none}.dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none}.dnb-anchor--focus:not(:active){background-color:transparent;transition:none}.dnb-anchor--focus:not(:active),.dnb-section .dnb-anchor--focus:not(:active).dnb-anchor{text-decoration:none}.dnb-anchor--no-style{color:inherit;transition:none}.dnb-anchor--no-style,.dnb-section .dnb-anchor--no-style.dnb-anchor{text-decoration:none}.dnb-anchor--no-style:hover{background-color:transparent;color:inherit}.dnb-anchor--no-underline,.dnb-section .dnb-anchor--no-underline.dnb-anchor{text-decoration:none}.dnb-anchor--no-hover:hover{background-color:transparent;color:inherit}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{text-decoration:none}.dnb-anchor.dnb-skeleton:after,.dnb-skeleton>.dnb-anchor:after{filter:grayscale(100%) opacity(.3)}
+button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out}sub .dnb-anchor,sup .dnb-anchor{padding:0 .025em}.dnb-h--basis .dnb-anchor,.dnb-h--large .dnb-anchor,.dnb-h--medium .dnb-anchor,.dnb-h--small .dnb-anchor,.dnb-h--x-large .dnb-anchor,.dnb-h--x-small .dnb-anchor,.dnb-h--xx-large .dnb-anchor,.dnb-lead .dnb-anchor,.dnb-p .dnb-anchor{font-size:inherit}.dnb-anchor.focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor.focus-visible,.dnb-section .dnb-anchor.focus-visible.dnb-anchor{text-decoration:none}.dnb-anchor:focus-visible,.dnb-section .dnb-anchor:focus-visible.dnb-anchor{text-decoration:none}.dnb-anchor:hover{border-radius:.25em}.dnb-anchor:hover,.dnb-section .dnb-anchor:hover.dnb-anchor{text-decoration:none}.dnb-anchor:active{border-radius:.25em}.dnb-anchor:active,.dnb-section .dnb-anchor:active.dnb-anchor{text-decoration:none}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiMwMDcyNzIiLz48L3N2Zz4=");background-size:0;position:relative}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-image:inherit;background-size:cover;color:inherit;content:"";display:inline-block;height:.889em;margin-left:.3em;margin-right:.125em;position:relative;transform-origin:bottom;transition:transform .3s ease-out,filter 1s ease-in-out;width:.889em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiNhNWUxZDIiLz48L3N2Zz4=")}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{top:.125em}[data-visual-test-wrapper] .dnb-anchor{transition:none}.dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{text-decoration:none}.dnb-anchor--no-style{color:inherit;transition:none}.dnb-anchor--no-style,.dnb-section .dnb-anchor--no-style.dnb-anchor{text-decoration:none}.dnb-anchor--no-style:hover{background-color:transparent;color:inherit}.dnb-anchor--no-underline,.dnb-section .dnb-anchor--no-underline.dnb-anchor{text-decoration:none}.dnb-anchor--no-hover:hover{background-color:transparent;color:inherit}.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--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{text-decoration:none}.dnb-anchor.dnb-skeleton:after,.dnb-skeleton>.dnb-anchor:after{filter:grayscale(100%) opacity(.3)}

package/cjs/components/anchor/style/dnb-anchor.scss

@@ -30,7 +30,7 @@ button.dnb-anchor {
 }
 
 .dnb-anchor--focus {
-  @include anchorFocusStyle('always');
+  @include anchorFocusStyle();
 }
 
 // no use case for that yet

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

@@ -1,7 +1,4 @@
 @charset "UTF-8";
-/*
- * Utilities
- */
 /*
  * Anchor mixins
  *
@@ -28,24 +25,38 @@
   background-color: var(--sb-color-green);
   border-radius: 0.5rem;
 }
-.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;
 }
-.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.25rem;
+}
+.dnb-anchor.focus-visible.dnb-anchor--icon-left {
+  margin-left: 0;
 }
-.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 .dnb-icon {
   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-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:focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
 .dnb-anchor.dnb-anchor--icon-left {
@@ -97,9 +108,6 @@
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: var(--sb-color-blue-light-3);
-}
 .dnb-anchor--focus.dnb-anchor--icon-left {
   margin-left: 0;
 }
@@ -113,28 +121,39 @@
   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--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/cjs/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;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-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25rem;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.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{background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.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--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/cjs/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss

@@ -1,4 +1,3 @@
-@use '../../../../style/core/utilities.scss';
 @use '../anchor-mixins.scss';
 
 @mixin anchorHover() {
@@ -21,10 +20,6 @@
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 
-  &:not(:active) {
-    background-color: var(--sb-color-blue-light-3);
-  }
-
   &.dnb-anchor--icon-left {
     margin-left: 0;
     .dnb-icon {
@@ -59,7 +54,7 @@
     @include anchorActive();
   }
 
-  &:focus {
+  &:focus-visible {
     @include anchorFocus();
   }
 
@@ -120,5 +115,5 @@
 
 // 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/cjs/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/cjs/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/cjs/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/cjs/components/autocomplete/Autocomplete.js

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