@dnb/eufemia 9.23.0-beta.4 → 9.23.0

package/CHANGELOG.md

@@ -3,50 +3,27 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [9.23.0-beta.4](https://github.com/dnbexperience/eufemia/compare/v9.23.0-beta.3...v9.23.0-beta.4) (2022-02-21)
+# [9.23.0](https://github.com/dnbexperience/eufemia/compare/v9.22.0...v9.23.0) (2022-02-22)
 
 
 ### Bug Fixes
 
 * **Dropdown:** disabled tertiary dropdown ([c1b4c4b](https://github.com/dnbexperience/eufemia/commit/c1b4c4b58511a7055e95ac32e0ed849e1838f075))
-* **Styles:** ensure independent styling packages have declared their dependencies ([8b3c230](https://github.com/dnbexperience/eufemia/commit/8b3c230b4e0c91d96695791731b61a6b8641c9db))
-
-
-### Features
-
-* **esm:** remove esm directory in package build ([f189b62](https://github.com/dnbexperience/eufemia/commit/f189b62dfcb620f0d0f7f8673c781c3e08060d32))
-* **Icon:** add examples for color property ([#1275](https://github.com/dnbexperience/eufemia/issues/1275)) ([67f8121](https://github.com/dnbexperience/eufemia/commit/67f8121485bbb419c6cc5f104023ccb619aeac73))
-* **Tabs:** Enhance parent width handling and remove auto edge detection ([d002f2c](https://github.com/dnbexperience/eufemia/commit/d002f2cada9a31d1923e6507d2015a06b751be71))
-* **TypeScript:** remove original ts/tsx files and only leave type definition files ([#1292](https://github.com/dnbexperience/eufemia/issues/1292)) ([79bdfb4](https://github.com/dnbexperience/eufemia/commit/79bdfb404dd9ebd484fff4770e849e16b6bbff2e))
-
-# [9.23.0-beta.3](https://github.com/dnbexperience/eufemia/compare/v9.23.0-beta.2...v9.23.0-beta.3) (2022-02-17)
-
-
-### Features
-
-* **esm:** remove esm directory in package build ([e36a90f](https://github.com/dnbexperience/eufemia/commit/e36a90fc6981ae6986eaebfa753cbcae4a0b29c5))
-
-# [9.23.0-beta.2](https://github.com/dnbexperience/eufemia/compare/v9.23.0-beta.1...v9.23.0-beta.2) (2022-02-16)
-
-
-### Bug Fixes
-
-* ensure auto type generation dont gets overwritten by tsc afterwards ([b94a786](https://github.com/dnbexperience/eufemia/commit/b94a786572275489ba9e5b1f864d14a9f52a9022))
-
-# [9.23.0-beta.1](https://github.com/dnbexperience/eufemia/compare/v9.22.0...v9.23.0-beta.1) (2022-02-16)
-
-
-### Bug Fixes
-
 * **Modal:** add possibility for camelcase props ([4127452](https://github.com/dnbexperience/eufemia/commit/4127452540c0a822f6a0c59d9dfeb4d2925d39f4))
 * **ProgressIndicator:** css change to fix aliasing artifacts for ProgressIndicator ([ab8859e](https://github.com/dnbexperience/eufemia/commit/ab8859e5b5ec4cf728312edf87e60715a864c61f))
 * set Eufemia.version during release ([e74d441](https://github.com/dnbexperience/eufemia/commit/e74d4412b395fe5b02cecdc9d1d962d1af73f41d))
+* **Styles:** ensure independent styling packages have declared their dependencies ([8b3c230](https://github.com/dnbexperience/eufemia/commit/8b3c230b4e0c91d96695791731b61a6b8641c9db))
+* **Tabs:** align to new UX designs ([794bf70](https://github.com/dnbexperience/eufemia/commit/794bf70f001feb10936c20c5023f270f34d69dfd))
+* **Tag:** fix Tag.Group spacing ([d7b77a2](https://github.com/dnbexperience/eufemia/commit/d7b77a29c2fc368d2c05c1466a93b54e7d9c7730))
 
 
 ### Features
 
+* **esm:** remove esm directory in package build ([f189b62](https://github.com/dnbexperience/eufemia/commit/f189b62dfcb620f0d0f7f8673c781c3e08060d32))
+* **Icon:** add examples for color property ([#1275](https://github.com/dnbexperience/eufemia/issues/1275)) ([67f8121](https://github.com/dnbexperience/eufemia/commit/67f8121485bbb419c6cc5f104023ccb619aeac73))
 * Separate Drawer and Dialog from Modal ([ebe8e6a](https://github.com/dnbexperience/eufemia/commit/ebe8e6a597c87885c081fcdfd76339780e90befc))
-* **TypeScript:** remove original ts/tsx files and only leave type definition files ([81712ab](https://github.com/dnbexperience/eufemia/commit/81712ab2aadf9845002d8a9487bfbfc3d066f65d))
+* **Tabs:** Enhance parent width handling and remove auto edge detection ([99ed393](https://github.com/dnbexperience/eufemia/commit/99ed3938bcfe6303162250cae1982af13df18744))
+* **TypeScript:** remove original ts/tsx files and only leave type definition files ([#1292](https://github.com/dnbexperience/eufemia/issues/1292)) ([79bdfb4](https://github.com/dnbexperience/eufemia/commit/79bdfb404dd9ebd484fff4770e849e16b6bbff2e))
 
 # [9.22.0](https://github.com/dnbexperience/eufemia/compare/v9.21.0...v9.22.0) (2022-02-09)
 

package/cjs/components/tabs/Tabs.js

@@ -153,18 +153,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);
         }
@@ -172,19 +179,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'
         });
@@ -357,8 +370,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];
 
@@ -472,11 +485,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);
         }
@@ -490,9 +503,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,
@@ -509,10 +522,10 @@ var Tabs = function (_React$PureComponent) {
       return _react.default.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,
@@ -527,11 +540,11 @@ var Tabs = function (_React$PureComponent) {
       }, rest), _react.default.createElement(ScrollNavButton, {
         onMouseDown: _this.openPrevTab,
         icon: "chevron_left",
-        className: (0, _classnames.default)(hasScrollbar && typeof _this.state.isFirst !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
+        className: (0, _classnames.default)(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.default.createElement(ScrollNavButton, {
         onMouseDown: _this.openNextTab,
         icon: "chevron_right",
-        className: (0, _classnames.default)(hasScrollbar && typeof _this.state.isLast !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
+        className: (0, _classnames.default)(hasScrollbar && (typeof _this.state.isLast !== 'undefined' || _this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -561,13 +574,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
@@ -651,6 +664,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,
@@ -713,14 +727,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) {
           (0, _componentHelper.warn)(e);
         }
@@ -757,11 +776,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) {
           (0, _componentHelper.warn)(e);
         }
@@ -779,14 +798,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;
@@ -812,6 +840,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;
@@ -848,12 +884,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;
@@ -866,8 +902,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);
     }
@@ -923,10 +959,10 @@ var Tabs = function (_React$PureComponent) {
           prerender = _this$props4.prerender;
 
       if ((0, _componentHelper.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)
@@ -939,10 +975,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 = {};
 
@@ -1011,14 +1047,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;
         });
 
@@ -1095,10 +1131,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({
@@ -1196,8 +1232,8 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   on_focus: _propTypes.default.func
 }) : void 0;
 
-var Dummy = function Dummy(_ref19) {
-  var children = _ref19.children;
+var Dummy = function Dummy(_ref20) {
+  var children = _ref20.children;
   return _react.default.createElement("span", {
     "aria-hidden": true,
     hidden: true,
@@ -1216,8 +1252,7 @@ var ScrollNavButton = function ScrollNavButton(props) {
     variant: "primary",
     tabIndex: "-1",
     bounding: true,
-    "aria-hidden": true,
-    icon_size: "medium"
+    "aria-hidden": true
   }, props, {
     className: (0, _classnames.default)('dnb-tabs__scroll-nav-button', props.className)
   }));

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