@dnb/eufemia 10.0.0-beta.6 → 10.0.0-beta.8

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

@@ -20,16 +20,17 @@ button.dnb-anchor {
 }
 
 .dnb-anchor {
+  --anchor-underline-thickness: 0.0938rem;
   display: inline;
-  padding: 0.05575em 0.125em;
+  padding: 0.05575em 0;
   font-size: var(--font-size-basis);
   text-decoration: underline;
   -webkit-text-decoration-color: currentcolor;
           text-decoration-color: currentcolor;
-  text-decoration-thickness: 0.0938rem;
+  text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
-  transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
 }
 sup .dnb-anchor, sub .dnb-anchor {
   padding: 0 0.025em;
@@ -115,6 +116,10 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 
 .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--focus:not(:active) {
@@ -124,12 +129,6 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 .dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
   text-decoration: none;
 }
-html[data-whatinput=mouse] .dnb-anchor--focus {
-  --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;
-}
 
 .dnb-anchor--no-style {
   color: inherit;

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

@@ -1 +1 @@
-button.dnb-anchor{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em .125em;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:.0938rem;text-underline-offset:.25em;transition:background-color .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-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=mouse] .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--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;-moz-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)}

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

@@ -17,6 +17,7 @@ button.dnb-anchor {
 }
 
 .dnb-anchor {
+  --anchor-underline-thickness: 0.0938rem;
   @include anchorStyle();
 }
 
@@ -29,7 +30,7 @@ button.dnb-anchor {
 }
 
 .dnb-anchor--focus {
-  @include anchorFocusStyle('mouse');
+  @include anchorFocusStyle('always');
 }
 
 // no use case for that yet

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

@@ -1,3 +1,7 @@
+@charset "UTF-8";
+/*
+ * Utilities
+ */
 /*
  * Anchor mixins
  *
@@ -6,14 +10,17 @@
  * Utilities
  */
 .dnb-anchor {
+  --anchor-underline-thickness: 0.125rem;
   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;
 }
 .dnb-anchor:hover {
   color: var(--sb-color-text);
   background-color: var(--sb-color-green-dark);
+  transition: none;
   border-radius: 0.5rem;
 }
 .dnb-anchor:active {
@@ -21,15 +28,58 @@
   background-color: var(--sb-color-green);
   border-radius: 0.5rem;
 }
-.dnb-anchor:focus:not(:active) {
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active) {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left {
+  margin-left: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right {
+  margin-right: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
+.dnb-anchor.dnb-anchor--icon-left {
+  padding-left: 0;
+  margin-left: 1.125em;
+}
+.dnb-anchor.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;
+  margin-right: 1.125em;
+}
+.dnb-anchor.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: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 {
   color: var(--sb-color-text);
   background-color: var(--sb-color-green-dark);
+  transition: none;
   border-radius: 0.5rem;
 }
 
@@ -44,6 +94,18 @@
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-left {
+  margin-left: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
 
 .dnb-anchor--contrast {
   color: var(--color-white);

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

@@ -1 +1 @@
-.dnb-anchor{color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);-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)}.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:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--hover{background-color:var(--sb-color-green-dark)}.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:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.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)/2 - .6em) .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)}html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left,html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left .dnb-icon{margin-left:0}html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right,html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).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:not(:active){background-color:var(--sb-color-blue-light-3);border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--focus:not(:active).dnb-anchor--icon-left,.dnb-anchor--focus:not(:active).dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus:not(:active).dnb-anchor--icon-right,.dnb-anchor--focus:not(:active).dnb-anchor--icon-right .dnb-icon{margin-right: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)}

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

@@ -1,56 +1,118 @@
+@use '../../../../style/core/utilities.scss';
 @use '../anchor-mixins.scss';
 
+@mixin anchorHover() {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green-dark);
+
+  transition: none;
+  border-radius: 0.5rem;
+}
+
+@mixin anchorActive() {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green);
+
+  border-radius: 0.5rem;
+}
+
+@mixin anchorFocus() {
+  &:not(:active) {
+    color: var(--sb-color-blue-dark);
+    background-color: var(--sb-color-blue-light-3);
+
+    border-radius: 0.25rem;
+
+    &.dnb-anchor--icon-left {
+      margin-left: 0;
+      .dnb-icon {
+        margin-left: 0;
+      }
+    }
+
+    &.dnb-anchor--icon-right {
+      margin-right: 0;
+      .dnb-icon {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
 .dnb-anchor {
+  --anchor-underline-thickness: 0.125rem;
+
   // 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;
 
-  &:hover {
-    color: var(--sb-color-text);
-    background-color: var(--sb-color-green-dark);
+  $anchor-icon-gutter: 0.125em;
 
-    border-radius: 0.5rem;
+  &:hover {
+    @include anchorHover();
   }
 
   &:active {
-    color: var(--sb-color-text);
-    background-color: var(--sb-color-green);
-
-    border-radius: 0.5rem;
+    @include anchorActive();
   }
 
   &:focus {
-    &:not(:active) {
-      color: var(--sb-color-blue-dark);
-      background-color: var(--sb-color-blue-light-3);
+    @include utilities.whatInput('keyboard') {
+      @include anchorFocus();
+    }
+  }
+
+  &.dnb-anchor--icon-left {
+    padding-left: 0;
+    margin-left: 1em + $anchor-icon-gutter;
+
+    .dnb-icon {
+      font-size: 1em;
+      margin-right: $anchor-icon-gutter;
+      margin-left: -1em - $anchor-icon-gutter;
+    }
+  }
 
-      border-radius: 0.25rem;
+  &.dnb-anchor--icon-right {
+    padding-right: 0;
+    margin-right: 1em + $anchor-icon-gutter;
+
+    .dnb-icon {
+      font-size: 1em;
+      margin-left: $anchor-icon-gutter;
+      margin-right: -1em - $anchor-icon-gutter;
+    }
+  }
+
+  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash) {
+    &:not(.dnb-anchor--icon-left) {
+      padding-left: 0;
+      &::before {
+        content: '\00a0';
+      }
+    }
+
+    &:not(.dnb-anchor--icon-right):not(.dnb-anchor[target='_blank']) {
+      padding-right: 0;
+      &::after {
+        content: '\00a0';
+      }
     }
   }
 }
 
 .dnb-anchor--hover {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
-
-  border-radius: 0.5rem;
+  @include anchorHover();
 }
 
 .dnb-anchor--active {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-
-  border-radius: 0.5rem;
+  @include anchorActive();
 }
 
 .dnb-anchor--focus {
-  &:not(:active) {
-    color: var(--sb-color-blue-dark);
-    background-color: var(--sb-color-blue-light-3);
-
-    border-radius: 0.25rem;
-  }
+  @include anchorFocus();
 }
 
 // TODO: add correct contrast styling when designs are in place

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

@@ -10,11 +10,11 @@
 }
 .dnb-anchor:hover, .dnb-anchor:active {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  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);
 }
 .dnb-anchor:active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-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) {
   color: var(--color-sea-green);
@@ -22,12 +22,12 @@
 
 .dnb-anchor--hover {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  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);
 }
 
 .dnb-anchor--active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-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) {

package/es/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{background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-anchor:active{background-color: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{background-color:var(--color-mint-green-50)}.dnb-anchor--active{background-color: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{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)}

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

@@ -6,12 +6,12 @@
   &:hover,
   &:active {
     color: var(--color-sea-green);
-    background-color: var(--color-mint-green-50);
+    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
   }
 
   &:active {
     color: var(--color-mint-green);
-    background-color: var(--color-emerald-green);
+    @include anchor-mixins.anchorBackground(var(--color-emerald-green));
   }
 
   &:focus {
@@ -23,12 +23,12 @@
 
 .dnb-anchor--hover {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
 }
 
 .dnb-anchor--active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-green);
+  @include anchor-mixins.anchorBackground(var(--color-emerald-green));
 }
 
 .dnb-anchor--focus {

package/es/components/autocomplete/Autocomplete.d.ts

@@ -11,6 +11,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -170,9 +171,9 @@ export interface AutocompleteProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.

package/es/components/autocomplete/Autocomplete.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _IconPrimary, _AlignmentHelper;
 
 const _excluded = ["fillDataIfEmpty"],
-      _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
+      _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -81,7 +81,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   disable_filter: false,
   disable_reorder: false,
@@ -161,7 +161,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
   disable_filter: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disable_reorder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -1367,7 +1370,7 @@ class AutocompleteInstance extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       scrollable,
       focusable,
@@ -1537,7 +1540,7 @@ class AutocompleteInstance extends React.PureComponent {
     }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       text: status,

package/es/components/button/Button.d.ts

@@ -7,6 +7,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
@@ -15,6 +16,7 @@ export type ButtonVariant =
   | 'signal'
   | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
+export type ButtonIcon = IconIcon;
 export type ButtonIconPositionTertiary = 'top';
 export type ButtonIconPosition = 'left' | 'right';
 export type ButtonIconPositionAll =
@@ -65,7 +67,7 @@ export type ButtonProps = {
   /**
    * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
    */
-  icon?: IconIcon;
+  icon?: ButtonIcon;
 
   /**
    * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.
@@ -99,9 +101,9 @@ export type ButtonProps = {
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
   id?: string;
 
   /**

package/es/components/button/Button.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _span, _span2, _span3;
 
-const _excluded = ["class", "className", "variant", "size", "title", "custom_content", "tooltip", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "id", "disabled", "text", "icon", "icon_position", "icon_size", "wrap", "bounding", "stretch", "skeleton", "element", "inner_ref", "innerRef"];
+const _excluded = ["class", "className", "variant", "size", "title", "custom_content", "tooltip", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "id", "disabled", "text", "icon", "icon_position", "icon_size", "wrap", "bounding", "stretch", "skeleton", "element", "inner_ref", "innerRef"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -82,7 +82,7 @@ export default class Button extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       id,
       disabled,
       text: _text,
@@ -183,7 +183,7 @@ export default class Button extends React.PureComponent {
     }))), this.state.afterContent, React.createElement(FormStatus, _extends({
       show: showStatus,
       id: this._id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: text,
       text: status,
       state: status_state,
@@ -215,7 +215,10 @@ process.env.NODE_ENV !== "production" ? Button.propTypes = _objectSpread(_object
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   id: PropTypes.string,
   class: PropTypes.string,
   href: PropTypes.string,
@@ -262,7 +265,7 @@ Button.defaultProps = {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   inner_ref: null,
   className: null,
   innerRef: null,

package/es/components/button/style/dnb-button--tertiary.css

@@ -5,6 +5,9 @@
 * Button mixins
 *
 */
+.dnb-button--tertiary {
+  --button-tertiary-focus-overflow: -1rem;
+}
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
 }
@@ -83,17 +86,23 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
-.dnb-button--tertiary .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium {
+  margin-top: calc(var(--button-height) / 2 - 0.75rem);
+}
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large {
+  margin-top: calc(var(--button-height) / 2 - 1rem);
+}
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon {
   margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon {
   margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon {
   margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
@@ -104,7 +113,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
   padding: 0;
 }
-.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
   margin-top: 0.5rem;
   align-self: center;
 }
@@ -146,7 +155,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   cursor: not-allowed;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before {
-  right: -1rem;
+  right: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   /* stylelint-disable */
@@ -173,7 +182,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   cursor: not-allowed;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before {
-  left: -1rem;
+  left: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] {
   cursor: not-allowed;