@dnb/eufemia 9.23.0-beta.4 → 9.23.0

package/components/tabs/Tabs.js

@@ -68,18 +68,25 @@ var Tabs = function (_React$PureComponent) {
       if (_this._isMounted) {
         _this.addScrollBehaviour();
 
-        _this.setScrollbarState();
+        var hasScrollbar = _this.hasScrollbar();
 
-        _this.scrollToTab({
-          type: 'focus',
-          behavior: 'auto'
-        });
+        var hasLastPosition = _this.hasLastPosition();
 
-        _this.scrollToTab({
-          type: 'selected',
-          behavior: 'auto'
+        _this.setScrollbarState({
+          hasScrollbar: hasScrollbar
         });
 
+        if (hasLastPosition) {
+          _this.setLeftPosition(_this.state.lastPosition);
+        }
+
+        if (hasScrollbar) {
+          _this.scrollToTab({
+            type: 'selected',
+            behavior: hasLastPosition ? 'smooth' : 'auto'
+          });
+        }
+
         if (_this.hasLastUsedTab() !== null) {
           _this.setState(null, _this.setFocusOnTabButton);
         }
@@ -87,19 +94,25 @@ var Tabs = function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setScrollbarState", function () {
-      var hasScrollbar = _this.hasScrollbar();
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$hasScrollbar = _ref.hasScrollbar,
+          hasScrollbar = _ref$hasScrollbar === void 0 ? _this.hasScrollbar() : _ref$hasScrollbar;
 
       if (hasScrollbar !== _this.state.hasScrollbar) {
         _this.setState({
           hasScrollbar: hasScrollbar
         });
       }
-
-      return hasScrollbar;
     });
 
     _defineProperty(_assertThisInitialized(_this), "onResizeHandler", function () {
-      if (_this.setScrollbarState()) {
+      var hasScrollbar = _this.hasScrollbar();
+
+      _this.setScrollbarState({
+        hasScrollbar: hasScrollbar
+      });
+
+      if (hasScrollbar) {
         _this.scrollToTab({
           type: 'selected'
         });
@@ -272,8 +285,8 @@ var Tabs = function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getCurrentTitle", function () {
       var selected_key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.selected_key;
 
-      var current = _this.state.data.filter(function (_ref) {
-        var key = _ref.key;
+      var current = _this.state.data.filter(function (_ref2) {
+        var key = _ref2.key;
         return key == selected_key;
       })[0];
 
@@ -387,11 +400,11 @@ var Tabs = function (_React$PureComponent) {
         }
 
         if (items) {
-          content = items.filter(function (_ref2) {
-            var key = _ref2.key;
+          content = items.filter(function (_ref3) {
+            var key = _ref3.key;
             return key && selected_key && key == selected_key;
-          }).reduce(function (acc, _ref3) {
-            var content = _ref3.content;
+          }).reduce(function (acc, _ref4) {
+            var content = _ref4.content;
             return content || acc;
           }, null);
         }
@@ -405,9 +418,9 @@ var Tabs = function (_React$PureComponent) {
       return content;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "TabsWrapperHandler", function (_ref4) {
-      var children = _ref4.children,
-          rest = _objectWithoutProperties(_ref4, _excluded);
+    _defineProperty(_assertThisInitialized(_this), "TabsWrapperHandler", function (_ref5) {
+      var children = _ref5.children,
+          rest = _objectWithoutProperties(_ref5, _excluded);
 
       var _this$props2 = _this.props,
           className = _this$props2.className,
@@ -424,10 +437,10 @@ var Tabs = function (_React$PureComponent) {
       return React.createElement("div", _extends({}, params, rest), children);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "TabsListHandler", function (_ref5) {
-      var children = _ref5.children,
-          className = _ref5.className,
-          rest = _objectWithoutProperties(_ref5, _excluded2);
+    _defineProperty(_assertThisInitialized(_this), "TabsListHandler", function (_ref6) {
+      var children = _ref6.children,
+          className = _ref6.className,
+          rest = _objectWithoutProperties(_ref6, _excluded2);
 
       var _this$props3 = _this.props,
           align = _this$props3.align,
@@ -442,11 +455,11 @@ var Tabs = function (_React$PureComponent) {
       }, rest), React.createElement(ScrollNavButton, {
         onMouseDown: _this.openPrevTab,
         icon: "chevron_left",
-        className: classnames(hasScrollbar && typeof _this.state.isFirst !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
+        className: classnames(hasScrollbar && (typeof _this.state.isFirst !== 'undefined' || _this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
       }), children, React.createElement(ScrollNavButton, {
         onMouseDown: _this.openNextTab,
         icon: "chevron_right",
-        className: classnames(hasScrollbar && typeof _this.state.isLast !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
+        className: classnames(hasScrollbar && (typeof _this.state.isLast !== 'undefined' || _this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -476,13 +489,13 @@ var Tabs = function (_React$PureComponent) {
       var selected_key = _this.state.selected_key;
       var TabElement = tab_element || 'button';
 
-      var tabs = _this.state.data.map(function (_ref6) {
-        var title = _ref6.title,
-            key = _ref6.key,
-            _ref6$disabled = _ref6.disabled,
-            disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-            to = _ref6.to,
-            href = _ref6.href;
+      var tabs = _this.state.data.map(function (_ref7) {
+        var title = _ref7.title,
+            key = _ref7.key,
+            _ref7$disabled = _ref7.disabled,
+            disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+            to = _ref7.to,
+            href = _ref7.href;
         var itemParams = {
           to: to,
           href: href
@@ -566,6 +579,7 @@ var Tabs = function (_React$PureComponent) {
       selected_key: _selected_key,
       focus_key: _selected_key,
       atEdge: false,
+      lastPosition: lastPosition,
       hasScrollbar: lastPosition > -1,
       _selected_key: _selected_key,
       _data: _props.data || _props.children,
@@ -628,14 +642,19 @@ var Tabs = function (_React$PureComponent) {
         }
       }
     }
+  }, {
+    key: "hasLastPosition",
+    value: function hasLastPosition() {
+      return this.state.lastPosition > -1;
+    }
   }, {
     key: "getLastPosition",
     value: function getLastPosition() {
       if (typeof window !== 'undefined') {
         try {
-          var pos = parseFloat(window.localStorage.getItem("tabs-pos-".concat(this._id))) || -1;
+          var pos = parseFloat(window.localStorage.getItem("tabs-pos-".concat(this._id)));
           window.localStorage.removeItem("tabs-pos-".concat(this._id));
-          return pos;
+          return isNaN(pos) ? -1 : pos;
         } catch (e) {
           warn(e);
         }
@@ -672,11 +691,11 @@ var Tabs = function (_React$PureComponent) {
   }, {
     key: "saveLastPosition",
     value: function saveLastPosition() {
-      var pos = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._tablistRef.current.scrollLeft;
+      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._tablistRef.current.scrollLeft;
 
       if (typeof window !== 'undefined') {
         try {
-          window.localStorage.setItem("tabs-pos-".concat(this._id), pos);
+          window.localStorage.setItem("tabs-pos-".concat(this._id), position);
         } catch (e) {
           warn(e);
         }
@@ -694,14 +713,23 @@ var Tabs = function (_React$PureComponent) {
         window.addEventListener('resize', this.onResizeHandler);
       }
     }
+  }, {
+    key: "setLeftPosition",
+    value: function setLeftPosition(scrollLeft) {
+      try {
+        this._tablistRef.current.style.scrollBehavior = 'auto';
+        this._tablistRef.current.scrollLeft = scrollLeft;
+        this._tablistRef.current.style.scrollBehavior = 'smooth';
+      } catch (e) {}
+    }
   }, {
     key: "scrollToTab",
-    value: function scrollToTab(_ref7) {
+    value: function scrollToTab(_ref8) {
       var _this2 = this;
 
-      var type = _ref7.type,
-          _ref7$behavior = _ref7.behavior,
-          behavior = _ref7$behavior === void 0 ? 'smooth' : _ref7$behavior;
+      var type = _ref8.type,
+          _ref8$behavior = _ref8.behavior,
+          behavior = _ref8$behavior === void 0 ? 'smooth' : _ref8$behavior;
 
       if (typeof window === 'undefined') {
         return;
@@ -727,6 +755,14 @@ var Tabs = function (_React$PureComponent) {
             var style = window.getComputedStyle(_this2._tabsRef.current);
             var margin = parseFloat(style.marginLeft);
             var padding = margin < 0 ? parseFloat(style.paddingLeft) : 0;
+
+            if (!isFirst && !isLast && parseFloat(style.paddingLeft) < 16) {
+              var navButton = _this2._tabsRef.current.querySelector('.dnb-tabs__scroll-nav-button:first-of-type');
+
+              var additionalSpace = parseFloat(window.getComputedStyle(navButton).width) * 1.5;
+              padding += additionalSpace;
+            }
+
             var leftPadding = (margin < 0 ? Math.abs(margin) : 0) + padding + parseFloat(window.getComputedStyle(first).paddingLeft);
             var offsetLeft = elem.offsetLeft;
             var left = elem && !isFirst ? offsetLeft - leftPadding : 0;
@@ -763,12 +799,12 @@ var Tabs = function (_React$PureComponent) {
   }, {
     key: "getStepKey",
     value: function getStepKey(useKey, stateKey) {
-      var currentData = this.state.data.filter(function (_ref8) {
-        var disabled = _ref8.disabled;
+      var currentData = this.state.data.filter(function (_ref9) {
+        var disabled = _ref9.disabled;
         return !disabled;
       });
-      var currentIndex = currentData.reduce(function (acc, _ref9, i) {
-        var key = _ref9.key;
+      var currentIndex = currentData.reduce(function (acc, _ref10, i) {
+        var key = _ref10.key;
         return key == stateKey ? i : acc;
       }, -1);
       var nextIndex = currentIndex + useKey;
@@ -781,8 +817,8 @@ var Tabs = function (_React$PureComponent) {
         nextIndex = 0;
       }
 
-      return currentData.reduce(function (acc, _ref10, i) {
-        var key = _ref10.key;
+      return currentData.reduce(function (acc, _ref11, i) {
+        var key = _ref11.key;
         return i === nextIndex ? key : acc;
       }, null);
     }
@@ -838,10 +874,10 @@ var Tabs = function (_React$PureComponent) {
           prerender = _this$props4.prerender;
 
       if (isTrue(prerender)) {
-        this._cache = Object.entries(data).reduce(function (acc, _ref11) {
-          var _ref12 = _slicedToArray(_ref11, 2),
-              idx = _ref12[0],
-              cur = _ref12[1];
+        this._cache = Object.entries(data).reduce(function (acc, _ref12) {
+          var _ref13 = _slicedToArray(_ref12, 2),
+              idx = _ref13[0],
+              cur = _ref13[1];
 
           acc[cur.key] = _objectSpread(_objectSpread({}, cur), {}, {
             content: _this3.getContent(cur.key)
@@ -854,10 +890,10 @@ var Tabs = function (_React$PureComponent) {
         }));
       }
 
-      var cachedContent = Object.entries(this._cache).map(function (_ref13) {
-        var _ref14 = _slicedToArray(_ref13, 2),
-            key = _ref14[0],
-            content = _ref14[1].content;
+      var cachedContent = Object.entries(this._cache).map(function (_ref14) {
+        var _ref15 = _slicedToArray(_ref14, 2),
+            key = _ref15[0],
+            content = _ref15[1].content;
 
         var params = {};
 
@@ -926,14 +962,14 @@ var Tabs = function (_React$PureComponent) {
       var useKey = selected_key;
 
       if (!useKey) {
-        useKey = data.reduce(function (acc, _ref15) {
-          var selected = _ref15.selected,
-              key = _ref15.key;
+        useKey = data.reduce(function (acc, _ref16) {
+          var selected = _ref16.selected,
+              key = _ref16.key;
           return selected ? key : acc;
         }, null) || data[0] && data[0].key;
       } else {
-        var keyExists = data.findIndex(function (_ref16) {
-          var key = _ref16.key;
+        var keyExists = data.findIndex(function (_ref17) {
+          var key = _ref17.key;
           return key == selected_key;
         });
 
@@ -1010,10 +1046,10 @@ var Tabs = function (_React$PureComponent) {
         } else if (typeof data === 'string') {
           res = data[0] === '[' ? JSON.parse(data) : [];
         } else if (data && _typeof(data) === 'object') {
-          res = Object.entries(data).reduce(function (acc, _ref17) {
-            var _ref18 = _slicedToArray(_ref17, 2),
-                key = _ref18[0],
-                obj = _ref18[1];
+          res = Object.entries(data).reduce(function (acc, _ref18) {
+            var _ref19 = _slicedToArray(_ref18, 2),
+                key = _ref19[0],
+                obj = _ref19[1];
 
             if (obj) {
               acc.push(_objectSpread({
@@ -1109,8 +1145,8 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   on_click: PropTypes.func,
   on_focus: PropTypes.func
 }) : void 0;
-export var Dummy = function Dummy(_ref19) {
-  var children = _ref19.children;
+export var Dummy = function Dummy(_ref20) {
+  var children = _ref20.children;
   return React.createElement("span", {
     "aria-hidden": true,
     hidden: true,
@@ -1127,8 +1163,7 @@ var ScrollNavButton = function ScrollNavButton(props) {
     variant: "primary",
     tabIndex: "-1",
     bounding: true,
-    "aria-hidden": true,
-    icon_size: "medium"
+    "aria-hidden": true
   }, props, {
     className: classnames('dnb-tabs__scroll-nav-button', props.className)
   }));

package/components/tabs/style/_tabs.scss

@@ -58,11 +58,13 @@
   }
 
   &__scroll-nav-button {
-    position: relative;
+    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; // use "none" to remove it from markup by default
@@ -155,39 +157,19 @@
       padding-right: 0.5rem;
     }
 
-    // Make the transition smooth when its the first or last item
-    // keep focus and selected separate
-    &:first-of-type.selected.focus,
-    &:last-of-type.focus,
-    &:last-of-type.selected {
-      transition: padding 1s #{$defaultEasing} 10ms;
-    }
+    will-change: padding;
+    transition: padding 1s #{$defaultEasing};
   }
 
-  &--has-scrollbar &__button__snap {
-    &:first-of-type {
-      margin-left: -3rem;
-      padding-left: 3rem;
-    }
-    &:last-of-type {
-      margin-right: -3rem;
-      padding-right: 3rem;
-    }
-
-    &:first-of-type.focus,
-    &:first-of-type.selected.focus {
-      padding-left: 0;
-
+  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,
-    &:last-of-type.selected.focus {
-      padding-right: 0;
-
+    &:last-of-type.focus {
       // add space so the focus ring is visible within our overflow
       /* stylelint-disable */
       .dnb-tabs__button:focus {
@@ -197,13 +179,6 @@
     }
   }
 
-  // Do this in order to have the selected tab to be nice aligned during scrollTo
-  &--has-scrollbar &__tabs__tablist {
-    margin: 0 -2rem; // The width of the nav-button
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   /* stylelint-disable */
   html[data-visual-test] & &__button,
   html[data-visual-test] & &__button__snap,

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

@@ -152,16 +152,17 @@
     .dnb-tabs__tabs--no-border::before {
       content: none; }
   .dnb-tabs__scroll-nav-button {
-    position: relative;
+    position: absolute;
     z-index: 2;
+    right: -2px;
     display: none;
     opacity: 0;
     pointer-events: none;
     -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: -2px;
+      right: auto; }
     .dnb-tabs__scroll-nav-button--visible {
       display: -webkit-box;
       display: -ms-flexbox;
@@ -230,7 +231,10 @@
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    padding: 0 1rem 0 1.5rem; }
+    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; } }
@@ -238,29 +242,13 @@
       padding-left: 0; }
     .dnb-tabs__button__snap:last-of-type {
       padding-right: 0.5rem; }
-    .dnb-tabs__button__snap:first-of-type.selected.focus, .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs__button__snap:last-of-type.selected {
-      -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms;
-      transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type {
-    margin-left: -3rem;
-    padding-left: 3rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
-    margin-right: -3rem;
-    padding-right: 3rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus {
-    padding-left: 0; }
-    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus .dnb-tabs__button:focus {
-      margin-left: 0.5rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus {
-    padding-right: 0;
+  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 */ }
-    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus .dnb-tabs__button:focus {
+    html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus {
       margin-right: 0.5rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__tabs__tablist {
-    margin: 0 -2rem;
-    padding-left: 3rem;
-    padding-right: 3rem; }
   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 {

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;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:relative;-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--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}@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__button__snap:first-of-type.selected.focus,.dnb-tabs__button__snap:last-of-type.focus,.dnb-tabs__button__snap:last-of-type.selected{-webkit-transition:padding 1s cubic-bezier(.42,0,0,1) 10ms;transition:padding 1s cubic-bezier(.42,0,0,1) 10ms}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type{margin-left:-3rem;padding-left:3rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type{margin-right:-3rem;padding-right:3rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus{padding-left:0}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus .dnb-tabs__button:focus{margin-left:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus{padding-right:0}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__tabs__tablist{margin:0 -2rem;padding-left:3rem;padding-right:3rem}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}
+.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;
+        }
       }
     }
   }

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

@@ -1116,8 +1116,16 @@ button.dnb-button::-moz-focus-inner {
 .dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
   padding-right: 0; }
 
-.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
-  margin-right: 0.25rem; }
-
-.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:first-of-type) {
-  margin-left: 0.25rem; }
+.dnb-tag__group {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  grid-gap: 0.5rem;
+  gap: 0.5rem; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-tag__group .dnb-button:not([class*='dnb-space']) {
+      margin-bottom: 0.5rem; }
+      .dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
+        margin-right: 0.5rem; } }