@dnb/eufemia 9.23.0-beta.3 → 9.23.1

package/components/tabs/style/_tabs.scss

@@ -20,24 +20,20 @@
       display: flex;
       flex: 0 1 auto;
 
-      // Fix the active/focus border spacing
-      padding: 0 0.5rem;
-      margin: 0 -0.5rem;
-
       &:focus {
         @include fakeFocus();
       }
 
       @include scrollX(auto);
       @include hideScrollbar();
-      // scroll-snap-type: x mandatory;// gives not the wanted extra UX yet
+      // scroll-snap-type: x mandatory; // gives not the wanted extra UX yet
     }
 
     &--left &__tablist {
       justify-content: flex-start;
     }
     &--right &__tablist {
-      flex-grow: 1;
+      flex: 1;
       justify-content: flex-end;
     }
     &--center &__tablist {
@@ -61,32 +57,24 @@
     }
   }
 
-  &:not(.dnb-tabs--has-scrollbar) &__tabs__tablist {
-    margin-left: -0.5rem;
-    padding-left: 0.5rem;
-  }
-
   &__scroll-nav-button {
     position: absolute;
     z-index: 2;
 
-    &.dnb-button--primary {
-      background-color: var(--color-emerald-green);
+    right: -2px;
+    &:first-of-type {
+      left: -2px;
+      right: auto;
     }
 
-    display: none;
+    display: none; // use "none" to remove it from markup by default
     opacity: 0;
+    pointer-events: none;
     transition: opacity 600ms ease-out;
 
-    &:first-of-type {
-      left: -2.5rem;
-    }
-    &:last-of-type {
-      right: -2.5rem;
-    }
-
     &--visible {
-      display: flex;
+      display: flex; // needs to be "flex" in order to make the transition work
+      pointer-events: initial;
       opacity: 1;
     }
 
@@ -96,45 +84,6 @@
     }
   }
 
-  &--at-edge &__scroll-nav-button {
-    &:first-of-type {
-      left: 0;
-    }
-    &:last-of-type {
-      right: 0;
-    }
-  }
-
-  html[data-visual-test] & &__scroll-nav-button {
-    transition: none;
-  }
-
-  &__button__snap {
-    display: flex;
-    padding: 0 1rem 0 1.5rem;
-
-    @include allBelow(small) {
-      padding: 0 1rem;
-    }
-
-    &:first-of-type {
-      padding-left: 0;
-    }
-    &:last-of-type {
-      padding-right: 0.5rem;
-    }
-  }
-  &--has-scrollbar &__button__snap {
-    &:last-of-type {
-      padding-right: 1.5rem;
-    }
-  }
-
-  // gives not the wanted extra UX yet
-  // &--has-scrollbar &__button__snap {
-  //   scroll-snap-align: start;
-  // }
-
   // Tab Button
   &__button,
   .dnb-core-style & &__button {
@@ -161,6 +110,9 @@
 
     white-space: nowrap;
 
+    // make the transition smooth, when going from :focus not no focus
+    transition: margin 400ms ease-out;
+
     // should be same as .lead small
     &__title {
       .dnb-icon {
@@ -189,6 +141,52 @@
     }
   }
 
+  &__button__snap {
+    display: flex;
+
+    padding: 0 1rem 0 1.5rem;
+
+    @include allBelow(small) {
+      padding: 0 1rem;
+    }
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+    &:last-of-type {
+      padding-right: 0.5rem;
+    }
+
+    will-change: padding;
+    transition: padding 1s #{$defaultEasing};
+  }
+
+  html[data-whatinput='keyboard'] &__button__snap {
+    &:first-of-type.focus {
+      // add space so the focus ring is visible within our overflow
+      .dnb-tabs__button:focus {
+        margin-left: 0.5rem;
+      }
+    }
+
+    &:last-of-type.focus {
+      // add space so the focus ring is visible within our overflow
+      /* stylelint-disable */
+      .dnb-tabs__button:focus {
+        margin-right: 0.5rem;
+      }
+      /* stylelint-enable */
+    }
+  }
+
+  /* stylelint-disable */
+  html[data-visual-test] & &__button,
+  html[data-visual-test] & &__button__snap,
+  html[data-visual-test] & &__scroll-nav-button {
+    transition: none !important;
+  }
+  /* stylelint-enable */
+
   &__content--spacing {
     padding-top: 2rem;
   }

package/components/tabs/style/dnb-tabs.css

@@ -72,191 +72,187 @@
  * Tabs component
  *
  */
-.dnb-tabs__tabs {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center; }
-  .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing {
-    padding-bottom: 0; }
-  .dnb-tabs__tabs__tablist {
+.dnb-tabs {
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-tabs__tabs {
+    position: relative;
+    z-index: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-flex: 0;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
-    padding: 0 0.5rem;
-    margin: 0 -0.5rem;
-    overflow-x: auto;
-    -ms-scroll-chaining: none;
-        overscroll-behavior: contain;
-    scrollbar-width: thin;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: auto;
-    scrollbar-color: #14555a transparent;
-    scrollbar-color: var(--color-emerald-green) transparent;
-    /* Hide scrollbar for Chrome, Safari */
-    /* stylelint-disable-next-line */
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */ }
-    .dnb-tabs__tabs__tablist:focus {
-      outline: none; }
-      html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
-        --border-color: var(--color-emerald-green);
-        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                box-shadow: 0 0 0 0.125rem var(--border-color);
-        border-color: transparent; }
-        @media screen and (-ms-high-contrast: none) {
-          html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
-            -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                    box-shadow: 0 0 0 0.125rem #14555a;
-            -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                    box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
-    html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
-      scroll-behavior: smooth; }
-    html[data-visual-test] .dnb-tabs__tabs__tablist {
-      scroll-behavior: auto !important; }
-    .dnb-tabs__tabs__tablist::-webkit-scrollbar {
-      display: none; }
-  .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start; }
-  .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end; }
-  .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center; }
-  .dnb-tabs__tabs::before {
-    content: '';
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+    .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing {
+      padding-bottom: 0; }
+    .dnb-tabs__tabs__tablist {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-flex: 0;
+          -ms-flex: 0 1 auto;
+              flex: 0 1 auto;
+      overflow-x: auto;
+      -ms-scroll-chaining: none;
+          overscroll-behavior: contain;
+      scrollbar-width: thin;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: auto;
+      scrollbar-color: #14555a transparent;
+      scrollbar-color: var(--color-emerald-green) transparent;
+      /* Hide scrollbar for Chrome, Safari */
+      /* stylelint-disable-next-line */
+      -ms-overflow-style: none;
+      /* IE and Edge */
+      scrollbar-width: none;
+      /* Firefox */ }
+      .dnb-tabs__tabs__tablist:focus {
+        outline: none; }
+        html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
+          --border-color: var(--color-emerald-green);
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color);
+          border-color: transparent; }
+          @media screen and (-ms-high-contrast: none) {
+            html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
+              -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                      box-shadow: 0 0 0 0.125rem #14555a;
+              -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                      box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+      html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
+        scroll-behavior: smooth; }
+      html[data-visual-test] .dnb-tabs__tabs__tablist {
+        scroll-behavior: auto !important; }
+      .dnb-tabs__tabs__tablist::-webkit-scrollbar {
+        display: none; }
+    .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
+    .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
+      -webkit-box-flex: 1;
+          -ms-flex: 1;
+              flex: 1;
+      -webkit-box-pack: end;
+          -ms-flex-pack: end;
+              justify-content: flex-end; }
+    .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center; }
+    .dnb-tabs__tabs::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: -100vw;
+      bottom: 0;
+      width: 100vw;
+      height: 1px; }
+    .dnb-tabs__tabs--no-border::before {
+      content: none; }
+  .dnb-tabs__scroll-nav-button {
     position: absolute;
-    z-index: -1;
-    left: -100vw;
-    bottom: 0;
-    width: 100vw;
-    height: 1px; }
-  .dnb-tabs__tabs--no-border::before {
-    content: none; }
-
-.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist {
-  margin-left: -0.5rem;
-  padding-left: 0.5rem; }
-
-.dnb-tabs__scroll-nav-button {
-  position: absolute;
-  z-index: 2;
-  display: none;
-  opacity: 0;
-  -webkit-transition: opacity 600ms ease-out;
-  transition: opacity 600ms ease-out; }
-  .dnb-tabs__scroll-nav-button.dnb-button--primary {
-    background-color: #14555a;
-    background-color: var(--color-emerald-green); }
-  .dnb-tabs__scroll-nav-button:first-of-type {
-    left: -2.5rem; }
-  .dnb-tabs__scroll-nav-button:last-of-type {
-    right: -2.5rem; }
-  .dnb-tabs__scroll-nav-button--visible {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    opacity: 1; }
-  .dnb-tabs__scroll-nav-button--hide {
+    z-index: 2;
+    right: -2px;
+    display: none;
+    opacity: 0;
     pointer-events: none;
-    opacity: 0 !important; }
-
-.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type {
-  left: 0; }
-
-.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type {
-  right: 0; }
-
-html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
-  -webkit-transition: none;
-  transition: none; }
-
-.dnb-tabs__button__snap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 0 1rem 0 1.5rem; }
-  @media screen and (max-width: 40em) {
-    .dnb-tabs__button__snap {
-      padding: 0 1rem; } }
-  .dnb-tabs__button__snap:first-of-type {
-    padding-left: 0; }
-  .dnb-tabs__button__snap:last-of-type {
-    padding-right: 0.5rem; }
-
-.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
-  padding-right: 1.5rem; }
-
-.dnb-tabs__button,
-.dnb-core-style .dnb-tabs .dnb-tabs__button {
-  position: relative;
-  z-index: 1;
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-  margin: 0;
-  padding: 0 0.125rem;
-  /* 1/16*4 */
-  background-color: transparent;
-  border-bottom: 1px solid transparent;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  font-size: 1.125rem;
-  font-size: var(--font-size-basis);
-  line-height: 1.5rem;
-  line-height: var(--line-height-basis);
-  text-decoration: none;
-  white-space: nowrap; }
-  .dnb-tabs__button__title .dnb-icon,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
-    font-size: 1rem;
-    font-size: var(--font-size-small);
-    -webkit-transform: translateY(-0.125rem);
-            transform: translateY(-0.125rem); }
-  .dnb-tabs__button .dnb-dummy,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+    -webkit-transition: opacity 600ms ease-out;
+    transition: opacity 600ms ease-out; }
+    .dnb-tabs__scroll-nav-button:first-of-type {
+      left: -2px;
+      right: auto; }
+    .dnb-tabs__scroll-nav-button--visible {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      pointer-events: initial;
+      opacity: 1; }
+    .dnb-tabs__scroll-nav-button--hide {
+      pointer-events: none;
+      opacity: 0 !important; }
+  .dnb-tabs__button,
+  .dnb-core-style .dnb-tabs .dnb-tabs__button {
+    position: relative;
+    z-index: 1;
+    -moz-user-select: none;
+     -ms-user-select: none;
+         user-select: none;
+    -webkit-user-select: none;
+    margin: 0;
+    padding: 0 0.125rem;
+    /* 1/16*4 */
+    background-color: transparent;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    text-decoration: none;
+    white-space: nowrap;
+    -webkit-transition: margin 400ms ease-out;
+    transition: margin 400ms ease-out; }
+    .dnb-tabs__button__title .dnb-icon,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
+      font-size: 1rem;
+      font-size: var(--font-size-small);
+      -webkit-transform: translateY(-0.125rem);
+              transform: translateY(-0.125rem); }
+    .dnb-tabs__button .dnb-dummy,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      height: 0;
+      visibility: hidden;
+      overflow: hidden; }
+    .dnb-tabs__button .dnb-dummy,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+      margin-top: 0.25rem; }
+    .dnb-tabs__button::after,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px; }
+  .dnb-tabs__button__snap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    height: 0;
-    visibility: hidden;
-    overflow: hidden; }
-  .dnb-tabs__button .dnb-dummy,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
-    margin-top: 0.25rem; }
-  .dnb-tabs__button::after,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px; }
-
-.dnb-tabs__content--spacing {
-  padding-top: 2rem; }
+    padding: 0 1rem 0 1.5rem;
+    will-change: padding;
+    -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1);
+    transition: padding 1s cubic-bezier(0.42, 0, 0, 1); }
+    @media screen and (max-width: 40em) {
+      .dnb-tabs__button__snap {
+        padding: 0 1rem; } }
+    .dnb-tabs__button__snap:first-of-type {
+      padding-left: 0; }
+    .dnb-tabs__button__snap:last-of-type {
+      padding-right: 0.5rem; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus {
+    margin-left: 0.5rem; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus {
+    /* stylelint-disable */
+    /* stylelint-enable */ }
+    html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus {
+      margin-right: 0.5rem; }
+  html[data-visual-test] .dnb-tabs .dnb-tabs__button,
+  html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,
+  html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
+    -webkit-transition: none !important;
+    transition: none !important; }
+  .dnb-tabs__content--spacing {
+    padding-top: 2rem; }

package/components/tabs/style/dnb-tabs.min.css

@@ -1 +1 @@
-.dnb-tabs{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tabs *,.dnb-tabs :after,.dnb-tabs :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tabs :after,.dnb-tabs :before{text-decoration:inherit;vertical-align:inherit}.dnb-tabs__tabs{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-box-flex:0;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;margin:0 -.5rem;overflow-x:auto;overscroll-behavior:contain;padding:0 .5rem;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}html[data-visual-test] .dnb-tabs__tabs__tablist{scroll-behavior:auto!important}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-box-pack:end;-ms-flex-pack:end;flex-grow:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist{margin-left:-.5rem;padding-left:.5rem}.dnb-tabs__scroll-nav-button{display:none;opacity:0;position:absolute;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button.dnb-button--primary{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-tabs__scroll-nav-button:first-of-type{left:-2.5rem}.dnb-tabs__scroll-nav-button:last-of-type{right:-2.5rem}.dnb-tabs__scroll-nav-button--visible{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{left:0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{right:0}html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{-webkit-transition:none;transition:none}.dnb-tabs__button__snap{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 1rem 0 1.5rem}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type{padding-right:1.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:1rem;font-size:var(--font-size-small);-webkit-transform:translateY(-.125rem);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__content--spacing{padding-top:2rem}
+.dnb-tabs{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tabs *,.dnb-tabs :after,.dnb-tabs :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tabs :after,.dnb-tabs :before{text-decoration:inherit;vertical-align:inherit}.dnb-tabs__tabs{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-box-flex:0;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}html[data-visual-test] .dnb-tabs__tabs__tablist{scroll-behavior:auto!important}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{-webkit-box-flex:1;-webkit-box-pack:end;-ms-flex-pack:end;-ms-flex:1;flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;-webkit-transition:margin .4s ease-out;transition:margin .4s ease-out;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:1rem;font-size:var(--font-size-small);-webkit-transform:translateY(-.125rem);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__button__snap{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 1rem 0 1.5rem;-webkit-transition:padding 1s cubic-bezier(.42,0,0,1);transition:padding 1s cubic-bezier(.42,0,0,1);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{-webkit-transition:none!important;transition:none!important}.dnb-tabs__content--spacing{padding-top:2rem}

package/components/tag/style/_tag.scss

@@ -90,12 +90,16 @@
 
   // Default space between tags
   &__group {
-    .dnb-button:not([class*='dnb-space']) {
-      &:not(:last-of-type) {
-        margin-right: 0.25rem;
-      }
-      &:not(:first-of-type) {
-        margin-left: 0.25rem;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    @include IS_IE {
+      .dnb-button:not([class*='dnb-space']) {
+        margin-bottom: 0.5rem;
+        &:not(:last-of-type) {
+          margin-right: 0.5rem;
+        }
       }
     }
   }