@dnb/eufemia 10.22.0 → 10.24.0

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

@@ -14,16 +14,17 @@
   --anchor-underline-thickness: 0.125rem;
   --anchor-background: transparent;
   --anchor-color--contrast: var(--sb-color-text);
+  --anchor-background-gutter-left: 0.25rem;
+  --anchor-background-gutter-right: 0.25rem;
+  --anchor-icon-fallback-position: translateY(-0.0625em);
   font-weight: var(--font-weight-medium);
   color: var(--sb-color-gray-dark-3);
-  text-decoration-color: var(--sb-color-green-dark);
   padding: 0.15625em 0;
   border-radius: 0.5em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-underline, :where(:not(.dnb-anchor--no-style)).dnb-anchor--was-node, :where(:not(.dnb-anchor--no-style)).dnb-anchor--inline {
-  --anchor-background-gutter: 0.25em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter) 0 0 0 var(--anchor-background);
+:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
+  font-size: 1em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   --anchor-background: var(--sb-color-green-dark);
@@ -53,41 +54,48 @@
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25em;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left {
-  margin-left: 0;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
-  margin-left: 0;
+:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor {
+  --anchor-icon-gutter: 0.125em;
+  --anchor-icon-seperator: " ";
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right {
-  margin-right: 0;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
-  margin-right: 0;
+:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
+  text-decoration-color: var(--sb-color-green-dark);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right {
-  margin-right: 1.125em;
+:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
+  --anchor-background-gutter-right: 0rem;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon {
-  font-size: 1em;
-  margin-left: 0.125em;
-  margin-right: -1.125em;
+:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
+  content: var(--anchor-icon-seperator);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left {
-  margin-left: 1.125em;
+:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
+  --anchor-background-gutter-left: 0rem;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type {
-  font-size: 1em;
-  margin-right: 0.125em;
-  margin-left: -1.125em;
+:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
+  content: var(--anchor-icon-seperator);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
-  text-decoration-color: var(--sb-color-green-dark);
-  content: " ";
+:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline) {
+  /* stylelint-disable-next-line scss/operator-no-unspaced */
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right)::after {
-  text-decoration-color: var(--sb-color-green-dark);
-  content: " ";
+@supports not (selector(*:where(*))) {
+  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor {
+    --anchor-icon-gutter: 0.125em;
+    --anchor-icon-seperator: " ";
+  }
+  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right {
+    text-decoration-color: var(--sb-color-green-dark);
+  }
+  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
+    --anchor-background-gutter-right: 0rem;
+  }
+  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
+    content: var(--anchor-icon-seperator);
+  }
+  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
+    --anchor-background-gutter-left: 0rem;
+  }
+  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
+    content: var(--anchor-icon-seperator);
+  }
 }
 
 :not(.dnb-anchor--no-style) {
@@ -98,16 +106,17 @@
     --anchor-underline-thickness: 0.125rem;
     --anchor-background: transparent;
     --anchor-color--contrast: var(--sb-color-text);
+    --anchor-background-gutter-left: 0.25rem;
+    --anchor-background-gutter-right: 0.25rem;
+    --anchor-icon-fallback-position: translateY(-0.0625em);
     font-weight: var(--font-weight-medium);
     color: var(--sb-color-gray-dark-3);
-    text-decoration-color: var(--sb-color-green-dark);
     padding: 0.15625em 0;
     border-radius: 0.5em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--no-underline, :not(.dnb-anchor--no-style).dnb-anchor--was-node, :not(.dnb-anchor--no-style).dnb-anchor--inline {
-    --anchor-background-gutter: 0.25em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter) 0 0 0 var(--anchor-background);
+  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
+    font-size: 1em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
     --anchor-background: var(--sb-color-green-dark);
@@ -137,41 +146,48 @@
     background-color: var(--sb-color-blue-light-3);
     border-radius: 0.25em;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left {
-    margin-left: 0;
+  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor {
+    --anchor-icon-gutter: 0.125em;
+    --anchor-icon-seperator: " ";
   }
-  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
-    margin-left: 0;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right {
-    margin-right: 0;
+  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
+    text-decoration-color: var(--sb-color-green-dark);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
-    margin-right: 0;
+  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
+    --anchor-background-gutter-right: 0rem;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right {
-    margin-right: 1.125em;
+  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
+    content: var(--anchor-icon-seperator);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon {
-    font-size: 1em;
-    margin-left: 0.125em;
-    margin-right: -1.125em;
+  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
+    --anchor-background-gutter-left: 0rem;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left {
-    margin-left: 1.125em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type {
-    font-size: 1em;
-    margin-right: 0.125em;
-    margin-left: -1.125em;
+  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
+    content: var(--anchor-icon-seperator);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before {
-    text-decoration-color: var(--sb-color-green-dark);
-    content: " ";
+  :not(.dnb-anchor--no-style):not(.dnb-anchor--inline) {
+    /* stylelint-disable-next-line scss/operator-no-unspaced */
   }
-  :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right)::after {
-    text-decoration-color: var(--sb-color-green-dark);
-    content: " ";
+  @supports not (selector(*:where(*))) {
+    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor {
+      --anchor-icon-gutter: 0.125em;
+      --anchor-icon-seperator: " ";
+    }
+    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right {
+      text-decoration-color: var(--sb-color-green-dark);
+    }
+    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
+      --anchor-background-gutter-right: 0rem;
+    }
+    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
+      content: var(--anchor-icon-seperator);
+    }
+    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
+      --anchor-background-gutter-left: 0rem;
+    }
+    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
+      content: var(--anchor-icon-seperator);
+    }
   }
 }
 
@@ -206,18 +222,6 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.dnb-anchor--focus.dnb-anchor--icon-left {
-  margin-left: 0;
-}
-.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon {
-  margin-left: 0;
-}
-.dnb-anchor--focus.dnb-anchor--icon-right {
-  margin-right: 0;
-}
-.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon {
-  margin-right: 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/themes/dnb-anchor-theme-sbanken.min.css

@@ -1 +1 @@
-@charset "UTF-8";:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0;text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--inline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-underline,:where(:not(.dnb-anchor--no-style)).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right{margin-right:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left{margin-left:1.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type{font-size:1em;margin-left:-1.125em;margin-right:.125em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before{content:" ";text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";text-decoration-color:var(--sb-color-green-dark)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0;text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style).dnb-anchor--inline,:not(.dnb-anchor--no-style).dnb-anchor--no-underline,:not(.dnb-anchor--no-style).dnb-anchor--was-node{--anchor-background-gutter:0.25em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter) 0 0 0 var(--anchor-background)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}:not(.dnb-anchor--no-style).dnb-anchor--icon-right{margin-right:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left{margin-left:1.125em}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type{font-size:1em;margin-left:-1.125em;margin-right:.125em}:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left):before,:not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-right):after{content:" ";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{-webkit-text-decoration:none;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:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{text-decoration-color:currentcolor}
+@charset "UTF-8";:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);--anchor-background-gutter-left:0.25rem;--anchor-background-gutter-right:0.25rem;--anchor-icon-fallback-position:translateY(-0.0625em);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default{font-size:1em}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left,:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left,:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;--anchor-color--contrast:var(--sb-color-text);--anchor-background-gutter-left:0.25rem;--anchor-background-gutter-right:0.25rem;--anchor-icon-fallback-position:translateY(-0.0625em);border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--font-weight-medium);padding:.15625em 0}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default{font-size:1em}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background:var(--sb-color-green-dark);border-radius:.5em;color:var(--sb-color-text);transition:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-background:var(--sb-color-green);border-radius:.5em;color:var(--sb-color-text);transition:none}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left,:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor{--anchor-icon-gutter:0.125em;--anchor-icon-seperator:" "}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left,:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right{text-decoration-color:var(--sb-color-green-dark)}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right){--anchor-background-gutter-right:0rem}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right):after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left){--anchor-background-gutter-left:0rem}:not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left):before{content:var(--anchor-icon-seperator)}}}.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{-webkit-text-decoration:none;text-decoration:none}.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{text-decoration-color:currentcolor}

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

@@ -25,20 +25,6 @@
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25em;
-
-  &.dnb-anchor--icon-left {
-    margin-left: 0;
-    .dnb-icon {
-      margin-left: 0;
-    }
-  }
-
-  &.dnb-anchor--icon-right {
-    margin-right: 0;
-    .dnb-icon {
-      margin-right: 0;
-    }
-  }
 }
 
 @include anchor-mixins.notNoStyle() {
@@ -46,27 +32,19 @@
     --anchor-underline-thickness: 0.125rem;
     --anchor-background: transparent;
     --anchor-color--contrast: var(--sb-color-text);
+    --anchor-background-gutter-left: 0.25rem;
+    --anchor-background-gutter-right: 0.25rem;
+    --anchor-icon-fallback-position: translateY(-0.0625em);
 
     font-weight: var(--font-weight-medium);
     color: var(--sb-color-gray-dark-3);
-    text-decoration-color: var(--sb-color-green-dark);
     padding: 0.15625em 0;
     border-radius: 0.5em;
 
-    $anchor-icon-gutter: 0.125em;
-
-    @include anchor-mixins.anchorBackground(
-      var(--anchor-background),
-      null
-    );
+    @include anchor-mixins.anchorBackground(var(--anchor-background));
 
-    &--no-underline,
-    &--was-node,
-    &--inline {
-      @include anchor-mixins.anchorBackground(
-        var(--anchor-background),
-        0.25em
-      );
+    .dnb-icon--default {
+      font-size: 1em;
     }
 
     &:hover {
@@ -82,40 +60,34 @@
     &:focus-visible {
       @include anchorFocus();
     }
+  }
 
-    &--icon-right {
-      margin-right: 1em + $anchor-icon-gutter;
-
-      .dnb-icon {
-        font-size: 1em;
-        margin-left: $anchor-icon-gutter;
-        margin-right: -1em - $anchor-icon-gutter;
-      }
+  @include anchor-mixins.notInline() {
+    &.dnb-anchor {
+      --anchor-icon-gutter: 0.125em;
+      // non-breaking space character
+      --anchor-icon-seperator: '\00a0';
     }
 
-    &--icon-left {
-      margin-left: 1em + $anchor-icon-gutter;
+    &.dnb-anchor--icon-left,
+    &.dnb-anchor--icon-right {
+      text-decoration-color: var(--sb-color-green-dark);
+    }
 
-      .dnb-icon:first-of-type {
-        font-size: 1em;
-        margin-right: $anchor-icon-gutter;
-        margin-left: -1em - $anchor-icon-gutter;
+    &.dnb-anchor--icon-left {
+      &:not(.dnb-anchor--icon-right) {
+        --anchor-background-gutter-right: 0rem;
+        &::after {
+          content: var(--anchor-icon-seperator);
+        }
       }
     }
 
-    &:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(
-        .anchor-hash
-      ):not(.dnb-anchor--inline) {
+    &.dnb-anchor--icon-right {
       &:not(.dnb-anchor--icon-left) {
+        --anchor-background-gutter-left: 0rem;
         &::before {
-          text-decoration-color: var(--sb-color-green-dark);
-          content: '\00a0';
-        }
-      }
-      &:not(.dnb-anchor--icon-right) {
-        &::after {
-          text-decoration-color: var(--sb-color-green-dark);
-          content: '\00a0';
+          content: var(--anchor-icon-seperator);
         }
       }
     }

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

@@ -19,8 +19,7 @@
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -28,26 +27,18 @@
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   --anchor-color: var(--color-sea-green);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child {
-  margin-right: 0.25em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child {
-  margin-left: 0.25em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
-  font-size: 1.11em;
+  font-size: 1em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
   stroke-width: 1.2;
@@ -67,8 +58,7 @@
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -76,26 +66,18 @@
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
       --anchor-color: var(--color-sea-green);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor:active {
     --anchor-color: var(--anchor-color--active);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     --anchor-color: var(--color-sea-green);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child {
-    margin-right: 0.25em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child {
-    margin-left: 0.25em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
-    font-size: 1.11em;
+    font-size: 1em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
     stroke-width: 1.2;
@@ -104,14 +86,12 @@
 
 .dnb-anchor--hover {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 
 .dnb-anchor--active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 
 .dnb-anchor--focus {

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

@@ -1 +1 @@
-:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}

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

@@ -44,16 +44,9 @@
     @include anchorFocus();
   }
 
-  &--icon-left .dnb-icon:first-child {
-    margin-right: 0.25em;
-  }
-  &--icon-right .dnb-icon:last-child {
-    margin-left: 0.25em;
-  }
-
   // Align this icon to look the same as in v10
   &__launch-icon.dnb-icon.dnb-icon--default {
-    font-size: 1.11em;
+    font-size: 1em;
     svg path {
       stroke-width: 1.2;
     }

package/cjs/components/aria-live/useAriaLive.d.ts

@@ -67,7 +67,7 @@ export default function useAriaLive(props: AriaLiveAllProps): {
     'aria-description'?: string;
     'aria-details'?: string;
     'aria-disabled'?: boolean | "true" | "false";
-    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup";
+    'aria-dropeffect'?: "copy" | "link" | "none" | "execute" | "move" | "popup";
     'aria-errormessage'?: string;
     'aria-expanded'?: boolean | "true" | "false";
     'aria-flowto'?: string;

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -68,26 +68,37 @@ const Breadcrumb = localProps => {
     props = _objectWithoutProperties(allProps, _excluded);
   const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
   const spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
-  const [isCollapsed, setCollapse] = (0, _react.useState)(overrideIsCollapsed);
+  const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
+  const isCollapsedRef = (0, _react.useRef)(overrideIsCollapsed);
   const {
     isLarge
   } = (0, _shared.useMedia)();
-  let currentVariant = variant;
-  if (!variant) {
-    if (items || data) {
-      currentVariant = 'responsive';
-    } else {
-      currentVariant = 'single';
-    }
-  }
   (0, _react.useEffect)(() => {
-    setCollapse(overrideIsCollapsed);
+    if (overrideIsCollapsed !== isCollapsedRef.current) {
+      isCollapsedRef.current = overrideIsCollapsed;
+      forceUpdate();
+    }
   }, [overrideIsCollapsed]);
   (0, _react.useEffect)(() => {
     if (isLarge && overrideIsCollapsed !== false) {
-      setCollapse(true);
+      isCollapsedRef.current = true;
+      forceUpdate();
+    }
+  }, [isLarge, overrideIsCollapsed]);
+  const onClickHandler = (0, _react.useCallback)(() => {
+    isCollapsedRef.current = !isCollapsedRef.current;
+    forceUpdate();
+  }, []);
+  const currentVariant = (0, _react.useMemo)(() => {
+    if (!variant) {
+      if (items || data) {
+        return 'responsive';
+      } else {
+        return 'single';
+      }
     }
-  }, [isLarge]);
+    return variant;
+  }, [data, items, variant]);
   (0, _componentHelper.validateDOMAttributes)(allProps, props);
   const innerSpace = (0, _componentHelper.isTrue)(spacing) ? 'small' : spacing;
   return _react.default.createElement("nav", _extends({
@@ -110,10 +121,8 @@ const Breadcrumb = localProps => {
     variant: "tertiary",
     icon: "chevron_left",
     icon_position: "left",
-    onClick: onClick || (() => {
-      setCollapse(!isCollapsed);
-    }),
-    "aria-expanded": !isCollapsed
+    onClick: onClick !== null && onClick !== void 0 ? onClick : onClickHandler,
+    "aria-expanded": !isCollapsedRef.current
   }), currentVariant !== 'collapse' && _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
     data: data,
     items: items,
@@ -125,7 +134,7 @@ const Breadcrumb = localProps => {
   }, _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
     data: data,
     items: items,
-    isCollapsed: isCollapsed,
+    isCollapsed: isCollapsedRef.current,
     noAnimation: noAnimation
   })));
 };