@dnb/eufemia 9.16.2 → 9.16.3

package/cjs/components/pagination/PaginationProvider.js

@@ -45,6 +45,8 @@ require("core-js/modules/es.array.find.js");
 
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.array.find-index.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -121,7 +123,7 @@ var PaginationProvider = function (_React$PureComponent) {
         newContent = [newContent, content];
       }
 
-      var pageNumber = parseFloat(newContent[0]);
+      var pageNumber = parseFloat(newContent[0]) || 1;
       newContent = newContent[1];
 
       if (typeof newContent === 'function') {
@@ -140,8 +142,7 @@ var PaginationProvider = function (_React$PureComponent) {
 
         if (!itemToPrepare) {
           items = _this.prefillItems(pageNumber, {
-            position: position,
-            skipObserver: true
+            position: position
           });
           itemToPrepare = items.find(function (_ref2) {
             var p = _ref2.pageNumber;
@@ -157,8 +158,7 @@ var PaginationProvider = function (_React$PureComponent) {
 
         _this.setState({
           items: _toConsumableArray(items || _this.state.items),
-          currentPage: pageNumber,
-          _listenForPropChanges: false
+          currentPage: pageNumber
         }, _this.callOnPageUpdate);
       }
     });
@@ -167,8 +167,7 @@ var PaginationProvider = function (_React$PureComponent) {
       clearTimeout(_this.resetContentTimeout);
       _this.resetContentTimeout = setTimeout(function () {
         _this.setState({
-          items: [],
-          _listenForPropChanges: false
+          items: []
         });
       }, 10);
     });
@@ -176,39 +175,29 @@ var PaginationProvider = function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "resetInfinity", function () {
       var pageNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.startupPage;
       var lowerPage = pageNumber;
-      var upperPage = pageNumber;
+      var upperPage = pageNumber + parseFloat(_this.props.startup_count) - 1;
       var currentPage = pageNumber;
-      _this._hasEndedInfinity = true;
 
       _this.setState({
+        items: [],
         hasEndedInfinity: true,
         lowerPage: lowerPage,
         upperPage: upperPage,
-        currentPage: currentPage,
-        _listenForPropChanges: false
+        currentPage: currentPage
       });
 
-      clearTimeout(_this.resetInfinityTimeout);
-      _this.resetInfinityTimeout = setTimeout(function () {
-        _this.startInfinity();
-      }, _this.state.minTime);
+      _this.startInfinity();
     });
 
     _defineProperty(_assertThisInitialized(_this), "startInfinity", function () {
-      _this._hasEndedInfinity = false;
-
       _this.setState({
-        hasEndedInfinity: false,
-        _listenForPropChanges: false
+        hasEndedInfinity: false
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "endInfinity", function () {
-      _this._hasEndedInfinity = true;
-
       _this.setState({
-        hasEndedInfinity: true,
-        _listenForPropChanges: false
+        hasEndedInfinity: true
       }, function () {
         var pageNumber = _this.state.currentPage + 1;
         (0, _componentHelper.dispatchCustomElementEvent)(_assertThisInitialized(_this), 'on_end', _objectSpread({
@@ -221,8 +210,7 @@ var PaginationProvider = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "setItems", function (items, cb) {
       _this.setState({
-        items: items,
-        _listenForPropChanges: false
+        items: items
       }, cb);
     });
 
@@ -231,6 +219,19 @@ var PaginationProvider = function (_React$PureComponent) {
       var items = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.state.items;
       var position = props.position || (pageNumber < _this.state.currentPage ? 'before' : 'after');
 
+      if (isNaN(pageNumber)) {
+        pageNumber = 1;
+      }
+
+      var exists = items.findIndex(function (_ref3) {
+        var p = _ref3.pageNumber;
+        return p === pageNumber;
+      }) > -1;
+
+      if (exists) {
+        return items;
+      }
+
       var obj = _objectSpread({
         pageNumber: pageNumber,
         position: position,
@@ -247,9 +248,7 @@ var PaginationProvider = function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setStateHandler", function (state, cb) {
-      _this.setState(_objectSpread(_objectSpread({}, state), {}, {
-        _listenForPropChanges: false
-      }), cb);
+      _this.setState(_objectSpread({}, state), cb);
     });
 
     _defineProperty(_assertThisInitialized(_this), "callOnPageUpdate", function () {
@@ -288,13 +287,12 @@ var PaginationProvider = function (_React$PureComponent) {
 
     _this.state = {
       items: [],
-      isLoading: false,
-      _listenForPropChanges: true
+      isLoading: false
     };
 
     if (_props.rerender) {
-      _this.rerender = function (_ref3) {
-        var store = _ref3.current;
+      _this.rerender = function (_ref4) {
+        var store = _ref4.current;
 
         if (store && store.pageNumber > 0) {
           clearTimeout(_this.rerenderTimeout);
@@ -354,9 +352,9 @@ var PaginationProvider = function (_React$PureComponent) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref4) {
-      var current = _ref4.current_page,
-          content = _ref4.internalContent;
+    value: function componentDidUpdate(_ref5) {
+      var current = _ref5.current_page,
+          content = _ref5.internalContent;
       var _this$props2 = this.props,
           internalContent = _this$props2.internalContent,
           current_page = _this$props2.current_page;
@@ -393,8 +391,7 @@ var PaginationProvider = function (_React$PureComponent) {
             setItems: this.setItems,
             prefillItems: this.prefillItems,
             setState: this.setStateHandler,
-            onPageUpdate: this.onPageUpdate,
-            _hasEndedInfinity: this._hasEndedInfinity
+            onPageUpdate: this.onPageUpdate
           }, this.props), this.state)
         })
       }, children);
@@ -402,48 +399,48 @@ var PaginationProvider = function (_React$PureComponent) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
-      if (state._listenForPropChanges) {
-        if (props.page_count !== null) {
-          state.pageCount = parseFloat(props.page_count) || 1;
-        }
+      if (props.page_count !== null) {
+        state.pageCount = parseFloat(props.page_count) || 1;
+      }
 
-        if (props.current_page !== null && typeof state.currentPage === 'undefined') {
-          state.currentPage = parseFloat(props.current_page) || 1;
-        }
+      if (props.current_page !== null && typeof state.currentPage === 'undefined') {
+        state.currentPage = parseFloat(props.current_page) || 1;
+      }
 
-        if (typeof state.startupPage === 'undefined') {
-          state.startupPage = parseFloat(props.startup_page) || parseFloat(props.current_page) || 1;
-        }
+      if (typeof state.startupPage !== 'number') {
+        state.startupPage = parseFloat(props.startup_page) || parseFloat(props.current_page) || state.currentPage;
+      }
 
-        state.parallelLoadCount = parseFloat(props.parallel_load_count) || 1;
-        state.minTime = parseFloat(props.min_wait_time) || 0;
-        state.placeMakerBeforeContent = (0, _componentHelper.isTrue)(props.place_maker_before_content);
+      state.parallelLoadCount = parseFloat(props.parallel_load_count) || 1;
+      state.minTime = parseFloat(props.min_wait_time) || 0;
+      state.placeMakerBeforeContent = (0, _componentHelper.isTrue)(props.place_maker_before_content);
 
-        if (props.useMarkerOnly) {
-          if (!state.lowerPage) {
-            state.lowerPage = state.upperPage = state.startupPage;
-          }
-        }
+      if (props.useMarkerOnly && props.reset_pagination_handler !== null && (0, _componentHelper.isTrue)(props.reset_pagination_handler)) {
+        state.lowerPage = undefined;
+        state.upperPage = undefined;
+      }
 
-        if (props.reset_pagination_handler !== null && (0, _componentHelper.isTrue)(props.reset_pagination_handler)) {
-          if (props.useMarkerOnly) {
-            state.lowerPage = state.upperPage = state.startupPage;
-          }
+      if (props.useMarkerOnly) {
+        if (typeof state.lowerPage === 'undefined' && parseFloat(props.current_page) > 0) {
+          state.lowerPage = state.startupPage;
         }
 
-        if (props.reset_content_handler !== null && (0, _componentHelper.isTrue)(props.reset_content_handler)) {
-          state.items = [];
-          state.pageCount = parseFloat(props.page_count) || 1;
+        if (typeof state.upperPage === 'undefined') {
+          state.upperPage = state.startupPage + parseFloat(props.startup_count) - 1;
         }
+      }
 
-        if (typeof props.items === 'string' && props.items[0] === '[') {
-          state.items = JSON.parse(props.items);
-        } else if (Array.isArray(props.items)) {
-          state.items = props.items;
-        }
+      if (props.reset_content_handler !== null && (0, _componentHelper.isTrue)(props.reset_content_handler)) {
+        state.items = [];
+        state.pageCount = parseFloat(props.page_count) || 1;
+      }
+
+      if (typeof props.items === 'string' && props.items[0] === '[') {
+        state.items = JSON.parse(props.items);
+      } else if (Array.isArray(props.items)) {
+        state.items = props.items;
       }
 
-      state._listenForPropChanges = true;
       return state;
     }
   }]);

package/cjs/components/tabs/style/_tabs.scss

@@ -139,7 +139,7 @@
     -webkit-user-select: none; // Safari / Touch fix
 
     margin: 0;
-    padding: 0.25rem 0.125rem; /* 1/16*4 */
+    padding: 0 0.125rem; /* 1/16*4 */
 
     background-color: transparent;
     border-bottom: 1px solid transparent;
@@ -167,6 +167,10 @@
 
     @include dummySpacing();
 
+    & .dnb-dummy {
+      margin-top: 0.25rem;
+    }
+
     &::after {
       content: '';
       position: absolute;

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

@@ -211,7 +211,7 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
        user-select: none;
   -webkit-user-select: none;
   margin: 0;
-  padding: 0.25rem 0.125rem;
+  padding: 0 0.125rem;
   /* 1/16*4 */
   background-color: transparent;
   border-bottom: 1px solid transparent;
@@ -242,6 +242,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
     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: '';

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;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: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:.25rem .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;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;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: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}

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

@@ -65,8 +65,10 @@
   font-size: 1.125rem;
   font-size: var(--font-size-basis);
   text-align: center;
+  display: block;
   color: #007272;
-  color: var(--color-sea-green); }
+  color: var(--color-sea-green);
+  padding: 0.5rem 0 0.25rem 0; }
 
 html:not([data-whatintent='touch']) .dnb-tabs__button:hover[disabled] {
   cursor: not-allowed; }
@@ -75,48 +77,49 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
   background-color: #d2f0e9;
   background-color: var(--color-mint-green-50); }
   html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled])::after {
-    height: 3px;
-    border-radius: 1.5px;
+    height: 2px;
+    border-radius: 2px;
     background-color: #007272;
     background-color: var(--color-sea-green); }
 
-.dnb-tabs__button:focus::before {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: -0.5rem;
-  bottom: 0;
-  right: -0.5rem;
-  height: inherit;
-  border-radius: inherit;
-  outline: none; }
-  html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
-    --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__button:focus::before {
-        -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); } }
-
-.dnb-tabs__button:focus::before {
-  top: 2px;
-  bottom: 2px;
-  right: 0;
-  left: 0;
-  border-radius: 0.25rem; }
+.dnb-tabs__button:focus {
+  overflow: visible; }
+  .dnb-tabs__button:focus::before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: -0.5rem;
+    bottom: 0;
+    right: -0.5rem;
+    height: inherit;
+    border-radius: inherit;
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+      --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__button:focus::before {
+          -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); } }
+  .dnb-tabs__button:focus::before {
+    top: 0.5rem;
+    left: -0.375rem;
+    right: -0.375rem;
+    bottom: 0.5rem;
+    border-radius: 1.5rem; }
 
 .dnb-tabs__button[disabled] .dnb-tabs__button__title {
   color: #b3dada;
   color: var(--color-sea-green-30); }
 
 .dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after {
-  height: 3px;
-  border-radius: 1.5px;
+  height: 2px;
+  border-radius: 2px;
   background-color: #007272;
   background-color: var(--color-sea-green); }
 

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

@@ -1 +1 @@
-.dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:after{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{--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__content:focus:after{-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)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:1.5px;height:3px}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--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__button:focus:before{-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)}}.dnb-tabs__button:focus:before{border-radius:.25rem;bottom:2px;left:0;right:0;top:2px}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:1.5px;height:3px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}
+.dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:after{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{--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__content:focus:after{-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)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);display:block;font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:focus{overflow:visible}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--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__button:focus:before{-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)}}.dnb-tabs__button:focus:before{border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}

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

@@ -62,27 +62,30 @@
       font-size: var(--font-size-basis);
       text-align: center;
 
+      display: block;
       color: var(--color-sea-green);
+      padding: 0.5rem 0 0.25rem 0;
     }
 
     // hover
     @include hover() {
       background-color: var(--color-mint-green-50);
       &::after {
-        height: 3px;
-        border-radius: 1.5px;
+        height: 2px;
+        border-radius: 2px;
         background-color: var(--color-sea-green);
       }
     }
 
     &:focus {
       @include buttonFocusRing();
+      overflow: visible;
       &::before {
-        top: 2px;
-        bottom: 2px;
-        right: 0;
-        left: 0;
-        border-radius: 0.25rem;
+        top: 0.5rem;
+        left: -0.375rem; // For overflow purposes
+        right: -0.375rem; // For overflow purposes
+        bottom: 0.5rem;
+        border-radius: 1.5rem;
       }
     }
 
@@ -95,8 +98,8 @@
     &:not([disabled]):active,
     &:not([disabled]).selected {
       &::after {
-        height: 3px;
-        border-radius: 1.5px;
+        height: 2px;
+        border-radius: 2px;
         background-color: var(--color-sea-green);
       }
     }

package/cjs/shared/component-helper.js

@@ -21,7 +21,7 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkIfHasScrollbar = exports.PLATFORM_WIN = exports.PLATFORM_MAC = exports.PLATFORM_LINUX = exports.PLATFORM_IOS = exports.InteractionInvalidation = exports.DetectOutsideClickClass = void 0;
+exports.checkIfHasScrollbar = exports.PLATFORM_WIN = exports.PLATFORM_MAC = exports.PLATFORM_LINUX = exports.PLATFORM_IOS = exports.PLATFORM_ANDROID = exports.InteractionInvalidation = exports.DetectOutsideClickClass = void 0;
 exports.combineDescribedBy = combineDescribedBy;
 exports.combineLabelledBy = combineLabelledBy;
 exports.convertJsxToString = void 0;
@@ -135,6 +135,8 @@ var PLATFORM_MAC = 'Mac|iPad|iPhone|iPod';
 exports.PLATFORM_MAC = PLATFORM_MAC;
 var PLATFORM_WIN = 'Win';
 exports.PLATFORM_WIN = PLATFORM_WIN;
+var PLATFORM_ANDROID = 'Android';
+exports.PLATFORM_ANDROID = PLATFORM_ANDROID;
 var PLATFORM_LINUX = 'Linux';
 exports.PLATFORM_LINUX = PLATFORM_LINUX;
 var PLATFORM_IOS = 'iOS|iPhone|iPad|iPod';

package/cjs/shared/helpers.js

@@ -23,7 +23,7 @@ require("core-js/modules/es.promise.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IS_WIN = exports.IS_SAFARI = exports.IS_MAC = exports.IS_LINUX = exports.IS_IOS = exports.IS_IE11 = exports.IS_EDGE = void 0;
+exports.IS_WIN = exports.IS_SAFARI = exports.IS_MAC = exports.IS_LINUX = exports.IS_IOS = exports.IS_IE11 = exports.IS_EDGE = exports.IS_ANDROID = void 0;
 exports.applyPageFocus = applyPageFocus;
 exports.copyToClipboard = copyToClipboard;
 exports.debounce = debounce;
@@ -33,7 +33,7 @@ exports.getSelectedElement = getSelectedElement;
 exports.getSelectedText = getSelectedText;
 exports.hasSelectedText = hasSelectedText;
 exports.insertElementBeforeSelection = insertElementBeforeSelection;
-exports.isiOS = exports.isWin = exports.isSafari = exports.isMac = exports.isLinux = exports.isIE11 = exports.isEdge = void 0;
+exports.isiOS = exports.isWin = exports.isSafari = exports.isMac = exports.isLinux = exports.isIE11 = exports.isEdge = exports.isAndroid = void 0;
 exports.scrollToLocationHashId = scrollToLocationHashId;
 exports.setPageFocusElement = setPageFocusElement;
 
@@ -83,6 +83,8 @@ var IS_WIN = false;
 exports.IS_WIN = IS_WIN;
 var IS_MAC = false;
 exports.IS_MAC = IS_MAC;
+var IS_ANDROID = false;
+exports.IS_ANDROID = IS_ANDROID;
 var IS_LINUX = false;
 exports.IS_LINUX = IS_LINUX;
 
@@ -102,26 +104,34 @@ var isWin = function isWin() {
 
 exports.isWin = isWin;
 
-var isLinux = function isLinux() {
+var isAndroid = function isAndroid() {
   var _navigator3;
 
-  return exports.IS_LINUX = IS_LINUX = typeof navigator !== 'undefined' && new RegExp(_componentHelper.PLATFORM_LINUX, 'i').test((_navigator3 = navigator) === null || _navigator3 === void 0 ? void 0 : _navigator3.platform);
+  return exports.IS_ANDROID = IS_ANDROID = typeof navigator !== 'undefined' && new RegExp(_componentHelper.PLATFORM_ANDROID, 'i').test((_navigator3 = navigator) === null || _navigator3 === void 0 ? void 0 : _navigator3.userAgent);
+};
+
+exports.isAndroid = isAndroid;
+
+var isLinux = function isLinux() {
+  var _navigator4;
+
+  return exports.IS_LINUX = IS_LINUX = typeof navigator !== 'undefined' && new RegExp(_componentHelper.PLATFORM_LINUX, 'i').test((_navigator4 = navigator) === null || _navigator4 === void 0 ? void 0 : _navigator4.platform);
 };
 
 exports.isLinux = isLinux;
 
 var isiOS = function isiOS() {
-  var _navigator4;
+  var _navigator5;
 
-  return exports.IS_IOS = IS_IOS = typeof navigator !== 'undefined' && new RegExp(_componentHelper.PLATFORM_IOS, 'i').test((_navigator4 = navigator) === null || _navigator4 === void 0 ? void 0 : _navigator4.platform);
+  return exports.IS_IOS = IS_IOS = typeof navigator !== 'undefined' && new RegExp(_componentHelper.PLATFORM_IOS, 'i').test((_navigator5 = navigator) === null || _navigator5 === void 0 ? void 0 : _navigator5.platform);
 };
 
 exports.isiOS = isiOS;
 
 var isSafari = function isSafari() {
-  var _navigator5, _navigator6;
+  var _navigator6, _navigator7;
 
-  return exports.IS_SAFARI = IS_SAFARI = typeof navigator !== 'undefined' && /safari/i.test((_navigator5 = navigator) === null || _navigator5 === void 0 ? void 0 : _navigator5.userAgent) && !/chrome/i.test((_navigator6 = navigator) === null || _navigator6 === void 0 ? void 0 : _navigator6.userAgent);
+  return exports.IS_SAFARI = IS_SAFARI = typeof navigator !== 'undefined' && /safari/i.test((_navigator6 = navigator) === null || _navigator6 === void 0 ? void 0 : _navigator6.userAgent) && !/chrome/i.test((_navigator7 = navigator) === null || _navigator7 === void 0 ? void 0 : _navigator7.userAgent);
 };
 
 exports.isSafari = isSafari;
@@ -133,9 +143,9 @@ var isIE11 = function isIE11() {
 exports.isIE11 = isIE11;
 
 var isEdge = function isEdge() {
-  var _navigator7;
+  var _navigator8;
 
-  return exports.IS_EDGE = IS_EDGE = typeof navigator !== 'undefined' && /edge/i.test((_navigator7 = navigator) === null || _navigator7 === void 0 ? void 0 : _navigator7.userAgent);
+  return exports.IS_EDGE = IS_EDGE = typeof navigator !== 'undefined' && /edge/i.test((_navigator8 = navigator) === null || _navigator8 === void 0 ? void 0 : _navigator8.userAgent);
 };
 
 exports.isEdge = isEdge;
@@ -144,6 +154,7 @@ isEdge();
 isiOS();
 isSafari();
 isWin();
+isAndroid();
 isMac();
 isLinux();
 var pageFocusElements = {};
@@ -380,7 +391,7 @@ function copyToClipboard(_x) {
 
 function _copyToClipboard() {
   _copyToClipboard = _asyncToGenerator(regeneratorRuntime.mark(function _callee(string) {
-    var _navigator8;
+    var _navigator9;
 
     var selection, range, resetSelection, copyFallback, success, newTry;
     return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -430,7 +441,7 @@ function _copyToClipboard() {
               return "Could not copy! Unknown reason. ".concat(string);
             };
 
-            if (!(typeof navigator !== 'undefined' && (_navigator8 = navigator) !== null && _navigator8 !== void 0 && _navigator8.clipboard)) {
+            if (!(typeof navigator !== 'undefined' && (_navigator9 = navigator) !== null && _navigator9 !== void 0 && _navigator9.clipboard)) {
               _context.next = 21;
               break;
             }

package/cjs/style/dnb-ui-components.css

@@ -6701,7 +6701,7 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
        user-select: none;
   -webkit-user-select: none;
   margin: 0;
-  padding: 0.25rem 0.125rem;
+  padding: 0 0.125rem;
   /* 1/16*4 */
   background-color: transparent;
   border-bottom: 1px solid transparent;
@@ -6732,6 +6732,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
     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: '';