@dnb/eufemia 10.4.2 → 10.6.0

package/cjs/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/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));