@dnb/eufemia 9.16.2 → 9.17.2

package/esm/shared/component-helper.js

@@ -1,6 +1,12 @@
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -8,6 +14,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -34,17 +46,15 @@ import "core-js/modules/es.array.slice.js";
 import "core-js/modules/esnext.string.match-all.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.string.trim.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.string.ends-with.js";
 import React from 'react';
 import keycode from 'keycode';
 import whatInput from 'what-input';
 import { registerElement } from './custom-element';
-export { registerElement };
-export var PLATFORM_MAC = 'Mac|iPad|iPhone|iPod';
-export var PLATFORM_WIN = 'Win';
-export var PLATFORM_LINUX = 'Linux';
-export var PLATFORM_IOS = 'iOS|iPhone|iPad|iPod';
+import { warn, IS_IE11, PLATFORM_MAC, PLATFORM_WIN, PLATFORM_LINUX } from './helpers';
+export { registerElement, warn };
 
 if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test' && typeof window !== 'undefined') {
   window.IS_TEST = true;
@@ -657,17 +667,6 @@ export var isInsideScrollView = function isInsideScrollView(currentElement) {
 
   return elem == window ? false : Boolean(elem);
 };
-export var warn = function warn() {
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
-    var _console;
-
-    for (var _len3 = arguments.length, e = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      e[_key3] = arguments[_key3];
-    }
-
-    (_console = console).log.apply(_console, ['Eufemia:'].concat(e));
-  }
-};
 export var convertJsxToString = function convertJsxToString(elements) {
   var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
 
@@ -736,7 +735,7 @@ export var InteractionInvalidation = function () {
     value: function activate() {
       var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
-      if (!this.nodesToInvalidate) {
+      if (!this._nodesToInvalidate) {
         this._runInvalidaiton(targetElement);
       }
     }
@@ -745,7 +744,7 @@ export var InteractionInvalidation = function () {
     value: function revert() {
       this._revertInvalidation();
 
-      this.nodesToInvalidate = null;
+      this._nodesToInvalidate = null;
     }
   }, {
     key: "_runInvalidaiton",
@@ -754,51 +753,77 @@ export var InteractionInvalidation = function () {
         return;
       }
 
-      this.nodesToInvalidate = this.getNodesToInvalidate(targetElement);
+      this._nodesToInvalidate = this.getNodesToInvalidate(targetElement);
 
-      if (Array.isArray(this.nodesToInvalidate)) {
-        this.nodesToInvalidate.forEach(function (node) {
-          try {
-            if (node && typeof node._orig_tabindex === 'undefined' && node.hasAttribute('tabindex')) {
-              node._orig_tabindex = node.getAttribute('tabindex');
-            }
+      var _iterator = _createForOfIteratorHelper(this._nodesToInvalidate),
+          _step;
 
-            if (node && typeof node._orig_ariahidden === 'undefined' && node.hasAttribute('aria-hidden')) {
-              node._orig_ariahidden = node.getAttribute('aria-hidden');
-            }
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var node = _step.value;
 
-            node.setAttribute('tabindex', '-1');
-            node.setAttribute('aria-hidden', 'true');
-          } catch (e) {}
-        });
+          if (!node) {
+            continue;
+          }
+
+          var tabindex = node.getAttribute('tabindex');
+          var ariahidden = node.getAttribute('aria-hidden');
+          var dataset = node.dataset;
+
+          if (tabindex !== null && typeof dataset._tabindex === 'undefined') {
+            node.dataset._tabindex = tabindex;
+          }
+
+          if (ariahidden !== null && typeof dataset._ariahidden === 'undefined') {
+            node.dataset._ariahidden = ariahidden;
+          }
+
+          node.setAttribute('tabindex', '-1');
+          node.setAttribute('aria-hidden', 'true');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
     }
   }, {
     key: "_revertInvalidation",
     value: function _revertInvalidation() {
-      if (!this.nodesToInvalidate) {
+      if (!Array.isArray(this._nodesToInvalidate)) {
         return;
       }
 
-      this.nodesToInvalidate.forEach(function (node) {
-        try {
-          if (node && typeof node._orig_tabindex !== 'undefined') {
-            node.setAttribute('tabindex', node._orig_tabindex);
-            node._orig_tabindex = null;
-            delete node._orig_tabindex;
+      var _iterator2 = _createForOfIteratorHelper(this._nodesToInvalidate),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var node = _step2.value;
+
+          if (!node) {
+            continue;
+          }
+
+          if (typeof node.dataset._tabindex !== 'undefined') {
+            node.setAttribute('tabindex', node.dataset._tabindex);
+            node.dataset._tabindex = null;
           } else {
             node.removeAttribute('tabindex');
           }
 
-          if (node && typeof node._orig_ariahidden !== 'undefined') {
-            node.setAttribute('aria-hidden', node._orig_ariahidden);
-            node._orig_ariahidden = null;
-            delete node._orig_ariahidden;
+          if (typeof node.dataset._ariahidden !== 'undefined') {
+            node.setAttribute('aria-hidden', node.dataset._ariahidden);
+            node.dataset._ariahidden = null;
           } else {
             node.removeAttribute('aria-hidden');
           }
-        } catch (e) {}
-      });
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
     }
   }, {
     key: "getNodesToInvalidate",
@@ -806,24 +831,35 @@ export var InteractionInvalidation = function () {
       var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
       if (typeof document === 'undefined') {
-        return;
+        return [];
       }
 
       if (typeof targetElement === 'string') {
         targetElement = document.querySelector(targetElement);
       }
 
-      var skipTheseNodes = this.bypassSelectors && this.bypassSelectors.length > 0 ? Array.from((this.bypassElement || document).querySelectorAll(this.bypassSelectors ? this.bypassSelectors.map(function (s) {
-        return "".concat(s, " *");
-      }).join(', ') : '*')) : [];
       var rootSelector = targetElement ? '*' : 'html *';
       var elementSelector = this.bypassSelectors.map(function (s) {
         return ":not(".concat(s, ")");
       }).join('');
-      var selector = "".concat(rootSelector, " ").concat(elementSelector, ":not(script):not(style):not(path)");
-      return Array.from((targetElement || document.documentElement).querySelectorAll(selector)).filter(function (node) {
-        return !skipTheseNodes.includes(node);
-      });
+      var selector = "".concat(rootSelector, " ").concat(elementSelector, ":not(script):not(style):not(path):not(head *)");
+
+      if (IS_IE11 || process.env.NODE_ENV === 'test') {
+        var excludeSelectors = [];
+        var testSelector = selector.split(':').map(function (localSel) {
+          if (localSel.endsWith(' *)')) {
+            excludeSelectors.push.apply(excludeSelectors, _toConsumableArray(Array.from((targetElement || document.documentElement).querySelectorAll(localSel.match(/\(([^)]*)\)/)[1]))));
+            localSel = localSel.replace(' *', '');
+          }
+
+          return localSel;
+        }).join(':');
+        return Array.from((targetElement || document.documentElement).querySelectorAll(testSelector)).filter(function (node) {
+          return !excludeSelectors.includes(node);
+        });
+      }
+
+      return Array.from((targetElement || document.documentElement).querySelectorAll(selector));
     }
   }]);
 
@@ -849,15 +885,15 @@ export function getInnerRef(ref) {
   return ret;
 }
 export function combineLabelledBy() {
-  for (var _len4 = arguments.length, params = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    params[_key4] = arguments[_key4];
+  for (var _len3 = arguments.length, params = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    params[_key3] = arguments[_key3];
   }
 
   return combineAriaBy('aria-labelledby', params);
 }
 export function combineDescribedBy() {
-  for (var _len5 = arguments.length, params = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    params[_key5] = arguments[_key5];
+  for (var _len4 = arguments.length, params = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    params[_key4] = arguments[_key4];
   }
 
   return combineAriaBy('aria-describedby', params);

package/esm/shared/helpers.js

@@ -8,13 +8,19 @@ import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.object.to-string.js";
-import { warn, PLATFORM_MAC, PLATFORM_WIN, PLATFORM_LINUX, PLATFORM_IOS } from './component-helper';
+import "core-js/modules/es.array.concat.js";
+export var PLATFORM_MAC = 'Mac|iPad|iPhone|iPod';
+export var PLATFORM_WIN = 'Win';
+export var PLATFORM_ANDROID = 'Android';
+export var PLATFORM_LINUX = 'Linux';
+export var PLATFORM_IOS = 'iOS|iPhone|iPad|iPod';
 export var IS_IE11 = false;
 export var IS_EDGE = false;
 export var IS_IOS = false;
 export var IS_SAFARI = false;
 export var IS_WIN = false;
 export var IS_MAC = false;
+export var IS_ANDROID = false;
 export var IS_LINUX = false;
 export var isMac = function isMac() {
   var _navigator;
@@ -26,34 +32,40 @@ export var isWin = function isWin() {
 
   return IS_WIN = typeof navigator !== 'undefined' && new RegExp(PLATFORM_WIN, 'i').test((_navigator2 = navigator) === null || _navigator2 === void 0 ? void 0 : _navigator2.platform);
 };
-export var isLinux = function isLinux() {
+export var isAndroid = function isAndroid() {
   var _navigator3;
 
-  return IS_LINUX = typeof navigator !== 'undefined' && new RegExp(PLATFORM_LINUX, 'i').test((_navigator3 = navigator) === null || _navigator3 === void 0 ? void 0 : _navigator3.platform);
+  return IS_ANDROID = typeof navigator !== 'undefined' && new RegExp(PLATFORM_ANDROID, 'i').test((_navigator3 = navigator) === null || _navigator3 === void 0 ? void 0 : _navigator3.userAgent);
 };
-export var isiOS = function isiOS() {
+export var isLinux = function isLinux() {
   var _navigator4;
 
-  return IS_IOS = typeof navigator !== 'undefined' && new RegExp(PLATFORM_IOS, 'i').test((_navigator4 = navigator) === null || _navigator4 === void 0 ? void 0 : _navigator4.platform);
+  return IS_LINUX = typeof navigator !== 'undefined' && new RegExp(PLATFORM_LINUX, 'i').test((_navigator4 = navigator) === null || _navigator4 === void 0 ? void 0 : _navigator4.platform);
+};
+export var isiOS = function isiOS() {
+  var _navigator5;
+
+  return IS_IOS = typeof navigator !== 'undefined' && new RegExp(PLATFORM_IOS, 'i').test((_navigator5 = navigator) === null || _navigator5 === void 0 ? void 0 : _navigator5.platform);
 };
 export var isSafari = function isSafari() {
-  var _navigator5, _navigator6;
+  var _navigator6, _navigator7;
 
-  return 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 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);
 };
 export var isIE11 = function isIE11() {
   return IS_IE11 = typeof window !== 'undefined' && typeof document !== 'undefined' ? !!window.MSInputMethodContext && !!document.documentMode : false;
 };
 export var isEdge = function isEdge() {
-  var _navigator7;
+  var _navigator8;
 
-  return IS_EDGE = typeof navigator !== 'undefined' && /edge/i.test((_navigator7 = navigator) === null || _navigator7 === void 0 ? void 0 : _navigator7.userAgent);
+  return IS_EDGE = typeof navigator !== 'undefined' && /edge/i.test((_navigator8 = navigator) === null || _navigator8 === void 0 ? void 0 : _navigator8.userAgent);
 };
 isIE11();
 isEdge();
 isiOS();
 isSafari();
 isWin();
+isAndroid();
 isMac();
 isLinux();
 var pageFocusElements = {};
@@ -279,7 +291,7 @@ export 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) {
@@ -329,7 +341,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;
             }
@@ -372,4 +384,16 @@ function _copyToClipboard() {
     }, _callee, null, [[7, 14]]);
   }));
   return _copyToClipboard.apply(this, arguments);
-}
+}
+
+export var warn = function warn() {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && typeof console.log === 'function') {
+    var _console;
+
+    for (var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++) {
+      e[_key] = arguments[_key];
+    }
+
+    (_console = console).log.apply(_console, ['Eufemia:'].concat(e));
+  }
+};

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

@@ -972,9 +972,10 @@
   .dnb-breadcrumb__bar.dnb-section {
     display: -webkit-box;
     display: -ms-flexbox;
-    display: flex;
-    padding: 1rem 0 0.5rem 0;
-    padding: var(--spacing-small) 0 var(--spacing-x-small) 0; }
+    display: flex; }
+  .dnb-breadcrumb--spacing .dnb-breadcrumb__bar.dnb-section {
+    padding: 0.5rem 0;
+    padding: var(--spacing-x-small) 0; }
   .dnb-breadcrumb__list {
     list-style: none;
     margin: 0;
@@ -1000,9 +1001,7 @@
             align-items: center;
     line-height: normal;
     padding: 0.5rem 0;
-    padding: var(--spacing-x-small) 0;
-    color: #333;
-    color: var(--color-black-80); }
+    padding: var(--spacing-x-small) 0; }
     .dnb-breadcrumb__item__span__icon {
       margin-left: 0.5rem;
       margin-left: calc(1rem / 2);
@@ -1017,8 +1016,8 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 0.5rem 2rem;
-    padding: var(--spacing-x-small) var(--spacing-large); }
+    padding: 0 2rem;
+    padding: 0 var(--spacing-large); }
   .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -1027,6 +1026,9 @@
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start; }
+  .dnb-breadcrumb--spacing .dnb-breadcrumb__collapse {
+    padding: 0.5rem 2rem;
+    padding: var(--spacing-x-small) var(--spacing-large); }
 
 /*
 * Button component
@@ -1179,8 +1181,6 @@
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
-  .dnb-button--tertiary .dnb-button__text {
-    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
@@ -2674,7 +2674,7 @@ html[data-visual-test] .dnb-global-status__shell {
 .dnb-global-status__title {
   position: relative;
   cursor: text;
-  min-height: 3.5rem; }
+  min-height: 4.5rem; }
   .dnb-global-status__title.dnb-p {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -2684,10 +2684,9 @@ html[data-visual-test] .dnb-global-status__shell {
             align-items: center;
     padding-top: 1rem;
     padding-bottom: 1rem;
-    padding-left: 3rem;
     padding-right: 5rem;
-    font-size: 1.25rem;
-    font-size: var(--font-size-medium); }
+    padding-left: 2.5rem;
+    margin-bottom: 0.5rem; }
   .dnb-spacing .dnb-global-status__title.dnb-p,
   .dnb-spacing .dnb-global-status__title.dnb-p:not([class*='dnb-space']) {
     margin: 0; }
@@ -2703,7 +2702,7 @@ html[data-visual-test] .dnb-global-status__shell {
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 2rem 0 2.5rem; }
+    padding: 0.5rem 0 2.5rem 2.5rem; }
     .dnb-global-status__message__content .dnb-p,
     .dnb-spacing .dnb-global-status__message__content .dnb-p,
     .dnb-spacing .dnb-global-status__message__content .dnb-p:not([class*='dnb-space']) {
@@ -2715,7 +2714,7 @@ html[data-visual-test] .dnb-global-status__shell {
   position: absolute;
   top: 0;
   left: 0;
-  margin-top: 0.75rem; }
+  margin-top: 1.5rem; }
 
 .dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary {
   position: absolute;
@@ -2734,15 +2733,14 @@ html[data-visual-test] .dnb-global-status__shell {
     margin: 0;
     margin-top: 0.5rem;
     padding-left: 1rem; }
-    .dnb-global-status__content .dnb-ul > li,
-    .dnb-spacing .dnb-global-status__content .dnb-ul > li,
-    .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) > li {
-      margin: 0;
-      padding-left: 0; }
-      .dnb-global-status__content .dnb-ul > li .dnb-anchor:last-of-type,
-      .dnb-spacing .dnb-global-status__content .dnb-ul > li .dnb-anchor:last-of-type,
-      .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) > li .dnb-anchor:last-of-type {
-        margin-left: 0.5rem; }
+    .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type,
+    .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type,
+    .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) .dnb-anchor:last-of-type {
+      margin-left: 0.5rem; }
+  .dnb-global-status__content .dnb-hr,
+  .dnb-spacing .dnb-global-status__content .dnb-hr,
+  .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*='dnb-space']) {
+    margin: 0; }
 
 @media screen and (-ms-high-contrast: none) {
   .dnb-global-status__icon > .dnb-icon {
@@ -3438,35 +3436,31 @@ html[data-visual-test] .dnb-global-status__shell {
 
 @-webkit-keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
@@ -3480,8 +3474,8 @@ html[data-visual-test] .dnb-global-status__shell {
   --modal-drawer-min-width: 25rem;
   --modal-drawer-max-width: 40rem;
   --modal-drawer-header-min-height: 6rem;
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -3880,37 +3874,23 @@ html[data-dnb-modal-active] {
     top: 0;
     width: 100%;
     height: 100%;
-    will-change: background-color;
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent);
-    -webkit-box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-            box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-    -webkit-box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-            box-shadow: 0 100vh 0 0 var(--modal-overlay-bg); }
-    .dnb-modal__overlay--modal {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-              animation: show-modal-overlay 300ms ease-out forwards 0ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
-    .dnb-modal__overlay--drawer {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 100ms;
-              animation: show-modal-overlay 300ms ease-out forwards 100ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms; }
-    .dnb-modal__overlay--hide {
+    background-color: black;
+    background-color: var(--modal-overlay-bg); }
+  .dnb-modal-root__inner .dnb-modal__overlay {
+    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
+            animation: hide-modal-overlay 300ms ease-in-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
+            animation: show-modal-overlay 300ms ease-out forwards 0ms;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
       -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
               animation: hide-modal-overlay 300ms ease-in-out forwards;
       -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
               animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
-  .dnb-modal-root__inner .dnb-modal__overlay {
-    opacity: 0;
-    -webkit-transition: opacity 300ms ease-in-out;
-    transition: opacity 300ms ease-in-out; }
-  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    opacity: 1; }
-  html[data-visual-test] .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-transition: none;
-    transition: none; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;
@@ -6179,12 +6159,20 @@ span.dnb-space--no-collapse > span {
     -webkit-box-shadow: 100vw 0 0 0 currentColor;
             box-shadow: 100vw 0 0 0 currentColor; }
 
-.dnb-step-indicator__sidebar {
-  max-width: 20rem;
-  margin-right: 3rem;
-  margin-right: var(--spacing-x-large); }
-  .dnb-step-indicator__sidebar .dnb-step-indicator__item {
-    min-width: 320px; }
+@media screen and (min-width: 50.1em) {
+  .dnb-step-indicator__sidebar {
+    max-width: 20rem;
+    margin-right: 3rem;
+    margin-right: var(--spacing-x-large); }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 320px; } }
+
+@media screen and (max-width: 50.1em) {
+  .dnb-step-indicator__sidebar--ssr-skeleton {
+    visibility: hidden;
+    overflow: hidden;
+    width: 0;
+    height: 5.5rem; } }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__list {
   display: -webkit-box;
@@ -6701,7 +6689,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 +6720,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: '';
@@ -7019,6 +7010,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
       margin-bottom: 0.5rem; }
       .dnb-responsive-component .dnb-textarea > .dnb-form-label {
         margin-bottom: 0.5rem; } }
+  html[data-visual-test] .dnb-textarea__textarea {
+    caret-color: #fff;
+    caret-color: var(--color-white); }
   .dnb-textarea.dnb-skeleton .dnb-textarea__inner {
     margin: 0;
     border-radius: 0.25rem; }