@dnb/eufemia 9.16.0 → 9.17.0

package/cjs/components/step-indicator/StepIndicatorItem.js

@@ -43,6 +43,8 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -59,8 +61,6 @@ var _Icon = _interopRequireDefault(require("../icon/Icon"));
 
 var _FormStatus = require("../../components/form-status/FormStatus");
 
-var _EventEmitter = _interopRequireDefault(require("../../shared/EventEmitter"));
-
 var _StepIndicatorContext = _interopRequireDefault(require("./StepIndicatorContext"));
 
 var _StepIndicatorItemV = require("./StepIndicatorItem-v1");
@@ -143,7 +143,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
       return typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
     });
 
-    _this._eventEmitter = _EventEmitter.default.createInstance(context.sidebar_id);
     _this._heightAnim = new _AnimateHeight.default({
       animate: !(0, _componentHelper.isTrue)(context.no_animation)
     });
@@ -162,8 +161,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._heightAnim.remove();
-
-      this._eventEmitter.remove();
     }
   }, {
     key: "getSnapshotBeforeUpdate",
@@ -228,7 +225,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       var isVisited = currentItemNum < activeStep;
       var id = "".concat(sidebar_id || (0, _componentHelper.makeUniqueId)(), "-").concat(currentItemNum);
       var ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
-      var isCurrent = currentItemNum === activeStep || (0, _componentHelper.isTrue)(is_current);
+      var isCurrent = currentItemNum === activeStep || (0, _componentHelper.isTrue)(is_current) && isNaN(parseFloat(activeStep));
 
       var element = _react.default.createElement(StepItemWrapper, {
         number: currentItemNum + 1,

package/cjs/components/step-indicator/StepIndicatorModal.js

@@ -8,24 +8,18 @@ require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/es.reflect.construct.js");
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.string.iterator.js");
 
-require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,24 +27,20 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _Modal = _interopRequireDefault(require("../modal/Modal"));
 
 var _StepIndicatorTriggerButton = _interopRequireDefault(require("./StepIndicatorTriggerButton"));
 
-var _StepIndicatorList2 = _interopRequireDefault(require("./StepIndicatorList"));
-
-var _StepIndicatorContext = _interopRequireWildcard(require("./StepIndicatorContext"));
+var _StepIndicatorList3 = _interopRequireDefault(require("./StepIndicatorList"));
 
-var _StepIndicatorList;
+var _StepIndicatorContext = _interopRequireDefault(require("./StepIndicatorContext"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _StepIndicatorList, _StepIndicatorList2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -85,47 +75,51 @@ var StepIndicatorModal = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      open_state: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChangeState", function () {
-      _this.setState({
-        open_state: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openHandler", function () {
-      _this.setState({
-        open_state: true
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "closeHandler", function () {
-      _this.setState({
-        open_state: false
-      });
+      var _this$context;
 
       if (_this.context.hasSidebar) {
         var _this$_triggerRef$cur;
 
         (_this$_triggerRef$cur = _this._triggerRef.current) === null || _this$_triggerRef$cur === void 0 ? void 0 : _this$_triggerRef$cur.focus();
       }
+
+      (_this$context = _this.context).closeHandler.apply(_this$context, arguments);
     });
 
     _this._triggerRef = _react.default.createRef();
+    _this.state = {
+      container: null
+    };
     return _this;
   }
 
   _createClass(StepIndicatorModal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var container = document.getElementById('sidebar__' + this.context.sidebar_id);
+      this.setState({
+        container: container
+      });
+    }
+  }, {
+    key: "renderPortal",
+    value: function renderPortal() {
+      if (!this.state.container) {
+        return null;
+      }
+
+      return _reactDom.default.createPortal(_StepIndicatorList || (_StepIndicatorList = _react.default.createElement(_StepIndicatorList3.default, null)), this.state.container);
+    }
+  }, {
     key: "render",
     value: function render() {
-      if (this.context.hasSidebar && !this.context.hideSidebar) {
-        return null;
+      if (this.context.sidebarIsVisible) {
+        return this.renderPortal();
       }
 
       return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_StepIndicatorTriggerButton.default, {
-        on_click: this.openHandler,
+        on_click: this.context.openHandler,
         inner_ref: this._triggerRef
       }), _react.default.createElement(_Modal.default, {
         id: this.context.sidebar_id,
@@ -133,19 +127,16 @@ var StepIndicatorModal = function (_React$PureComponent) {
         trigger_hidden: true,
         mode: "drawer",
         animation_direction: "bottom",
-        open_state: this.state.open_state,
-        on_open: this.openHandler,
+        open_state: this.context.openState,
+        on_open: this.context.openHandler,
         on_close: this.closeHandler
-      }, _react.default.createElement(_StepIndicatorContext.StepIndicatorProvider, _extends({}, this.context, {
-        sidebar_id: this.context.sidebar_id,
-        onChangeState: this.onChangeState
-      }), _react.default.createElement(_Modal.default.Content, {
+      }, _react.default.createElement(_Modal.default.Content, {
         style_type: "white"
       }, _react.default.createElement("div", {
         className: "dnb-step-indicator-v2"
       }, _react.default.createElement("p", {
         className: "dnb-p dnb-step-indicator__label"
-      }, this.context.stepsLabelExtended), _StepIndicatorList || (_StepIndicatorList = _react.default.createElement(_StepIndicatorList2.default, null)))))));
+      }, this.context.stepsLabelExtended), _StepIndicatorList2 || (_StepIndicatorList2 = _react.default.createElement(_StepIndicatorList3.default, null))))));
     }
   }]);
 

package/cjs/components/step-indicator/StepIndicatorProps.js

@@ -46,7 +46,7 @@ var stepIndicatorPropTypes = _objectSpread(_objectSpread({
     is_active: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
     url_future: _propTypes.default.string,
     url_passed: _propTypes.default.string
-  }))]).isRequired,
+  }))]),
   overview_title: _propTypes.default.string,
   step_title_extended: _propTypes.default.string,
   step_title: _propTypes.default.string,

package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -1,4 +1,27 @@
 import * as React from 'react';
+export type StepIndicatorSidebarMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorSidebarCurrentStep = string | number;
+export type StepIndicatorSidebarData =
+  | string
+  | string[]
+  | {
+      title: string | React.ReactNode;
+      is_current?: boolean;
+      inactive?: boolean;
+      disabled?: boolean;
+      status?: string | React.ReactNode;
+      status_state?: 'warn' | 'info' | 'error';
+
+      /**
+       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       */
+      on_click?: (...args: any[]) => any;
+      on_render?: (...args: any[]) => any;
+      url?: string;
+      is_active?: string | boolean;
+      url_future?: string;
+      url_passed?: string;
+    }[];
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,7 +32,23 @@ export interface StepIndicatorSidebarProps
    * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
+
+  /**
+   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: StepIndicatorSidebarMode;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorSidebarCurrentStep;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   */
+  data?: StepIndicatorSidebarData;
   internalId?: string;
+  showInitialData?: boolean;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,

package/cjs/components/step-indicator/StepIndicatorSidebar.js

@@ -27,19 +27,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.array.concat.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _StepIndicatorList = _interopRequireDefault(require("./StepIndicatorList"));
+var _componentHelper = require("../../shared/component-helper");
 
-var _StepIndicatorContext = require("./StepIndicatorContext");
+var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _EventEmitter = _interopRequireDefault(require("../../shared/EventEmitter"));
+var _StepIndicatorList2 = _interopRequireDefault(require("./StepIndicatorList"));
 
-var _MediaQueryUtils = require("../../shared/MediaQueryUtils");
+var _StepIndicatorProps = require("./StepIndicatorProps");
 
-var _div;
+var _StepIndicatorContext = require("./StepIndicatorContext");
+
+var _StepIndicatorList;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -72,22 +76,19 @@ var StepIndicatorSidebar = function (_React$PureComponent) {
 
   var _super = _createSuper(StepIndicatorSidebar);
 
-  function StepIndicatorSidebar(props) {
+  function StepIndicatorSidebar() {
     var _this;
 
     _classCallCheck(this, StepIndicatorSidebar);
 
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      hasSidebar: true,
-      hideSidebar: false
-    });
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this._eventEmitter = _EventEmitter.default.createInstance(props.sidebar_id);
+    _this = _super.call.apply(_super, [this].concat(args));
 
-    _this._eventEmitter.update({
-      hideSidebar: true
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      showInitialData: true
     });
 
     return _this;
@@ -96,53 +97,47 @@ var StepIndicatorSidebar = function (_React$PureComponent) {
   _createClass(StepIndicatorSidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
-
-      this._mediaQueryListener = (0, _MediaQueryUtils.onMediaQueryChange)({
-        min: '0',
-        max: 'medium'
-      }, function (hideSidebar) {
-        _this2.setState({
-          hideSidebar: hideSidebar
+      if (!this.props.showInitialData) {
+        this.setState({
+          showInitialData: false
         });
-
-        if (_this2._eventEmitter) {
-          _this2._eventEmitter.update({
-            hideSidebar: hideSidebar
-          });
-        }
-      }, {
-        runOnInit: true
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._mediaQueryListener) {
-        this._mediaQueryListener();
       }
 
-      if (this._eventEmitter) {
-        this._eventEmitter.update({
-          hasSidebar: false
+      if (this._hasSkeletonData) {
+        this.setState({
+          skeleton: false
         });
       }
-
-      if (this._eventEmitter) {
-        this._eventEmitter.remove();
-
-        this._eventEmitter = null;
+    }
+  }, {
+    key: "getContextAndProps",
+    value: function getContextAndProps() {
+      var _this$context, _this$context2, _providerProps$data;
+
+      var providerProps = (0, _componentHelper.extendPropsWithContext)(this.props, _StepIndicatorProps.stepIndicatorDefaultProps, {
+        skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
+      }, this.context.getTranslation(this.context).StepIndicator, (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.StepIndicator);
+
+      if (!(((_providerProps$data = providerProps.data) === null || _providerProps$data === void 0 ? void 0 : _providerProps$data.length) > 0)) {
+        var text = 'Skeleton text';
+        providerProps.data = [text.slice(10), text, text, text.slice(4)];
+        providerProps.skeleton = true;
+        this._hasSkeletonData = true;
       }
+
+      return providerProps;
     }
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement(_StepIndicatorContext.StepIndicatorProvider, _extends({
-        sidebar_id: this.props.internalId || this.props.sidebar_id,
-        listAttributes: this.props
-      }, this.state), !(this.state.hasSidebar & this.state.hideSidebar) && (_div || (_div = _react.default.createElement("div", {
-        className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar"
-      }, _react.default.createElement(_StepIndicatorList.default, null)))));
+      var providerProps = this.state.showInitialData ? this.getContextAndProps() : null;
+      return _react.default.createElement("div", {
+        id: 'sidebar__' + this.props.sidebar_id,
+        className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar" + (this._hasSkeletonData && providerProps !== null && providerProps !== void 0 && providerProps.skeleton ? " dnb-step-indicator__sidebar--ssr-skeleton" : "")
+      }, providerProps && _react.default.createElement(_StepIndicatorContext.StepIndicatorProvider, _extends({
+        isSidebar: true,
+        sidebar_id: this.props.internalId || this.props.sidebar_id
+      }, providerProps), _StepIndicatorList || (_StepIndicatorList = _react.default.createElement(_StepIndicatorList2.default, null))));
     }
   }]);
 
@@ -151,11 +146,19 @@ var StepIndicatorSidebar = function (_React$PureComponent) {
 
 exports.default = StepIndicatorSidebar;
 
+_defineProperty(StepIndicatorSidebar, "contextType", _Context.default);
+
 _defineProperty(StepIndicatorSidebar, "defaultProps", {
-  internalId: null
+  mode: _StepIndicatorProps.stepIndicatorDefaultProps.mode,
+  current_step: _StepIndicatorProps.stepIndicatorDefaultProps.current_step,
+  data: _StepIndicatorProps.stepIndicatorDefaultProps.data
 });
 
 process.env.NODE_ENV !== "production" ? StepIndicatorSidebar.propTypes = {
   sidebar_id: _propTypes.default.string.isRequired,
-  internalId: _propTypes.default.string
+  mode: _StepIndicatorProps.stepIndicatorPropTypes.mode,
+  current_step: _StepIndicatorProps.stepIndicatorPropTypes.current_step,
+  data: _StepIndicatorProps.stepIndicatorPropTypes.data,
+  internalId: _propTypes.default.string,
+  showInitialData: _propTypes.default.bool
 } : void 0;

package/cjs/components/step-indicator/StepIndicatorTriggerButton.js

@@ -49,7 +49,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
-var _fullscreen_medium = _interopRequireDefault(require("../../icons/fullscreen_medium"));
+var _chevron_down_medium = _interopRequireDefault(require("../../icons/chevron_down_medium"));
 
 var _componentHelper = require("../../shared/component-helper");
 
@@ -179,12 +179,12 @@ var StepIndicatorTriggerButton = function (_React$PureComponent) {
         wrap: true,
         stretch: true,
         variant: "secondary",
-        icon: _fullscreen_medium.default,
+        icon: _chevron_down_medium.default,
         icon_size: "medium",
         icon_position: "right",
         inner_ref: this._buttonRef
       }), _react.default.createElement(_StepIndicatorItem.StepItemWrapper, {
-        number: this.context.activeStep + 1,
+        number: (this.context.activeStep || 0) + 1,
         hide_numbers: this.context.hide_numbers
       }, (typeof item === 'string' ? item : item && item.title) || '')));
     }

package/cjs/components/step-indicator/style/_step-indicator.scss

@@ -6,11 +6,24 @@
 @import './_step-indicator-v1.scss';
 
 .dnb-step-indicator__sidebar {
-  max-width: 20rem;
-  margin-right: var(--spacing-x-large);
+  @media screen and (min-width: 50.1em) {
+    max-width: 20rem;
+    margin-right: var(--spacing-x-large);
 
-  .dnb-step-indicator__item {
-    min-width: 320px;
+    .dnb-step-indicator__item {
+      min-width: 320px;
+    }
+  }
+
+  // To avoid layout shift during SSR hydration
+  // we hide the sidebar with skeleton on small screens
+  &--ssr-skeleton {
+    @media screen and (max-width: 50.1em) {
+      visibility: hidden;
+      overflow: hidden;
+      width: 0;
+      height: 5.5rem; // the height of the modal button + label + margin
+    }
   }
 }
 
@@ -50,6 +63,10 @@
 
     will-change: height;
     transition: height 400ms #{$defaultEasing};
+
+    html[data-visual-test] & {
+      transition-duration: 1ms !important;
+    }
   }
   &__trigger button#{&}__trigger__button {
     margin-top: 0.5rem;
@@ -61,6 +78,10 @@
     .dnb-button__icon {
       opacity: 1;
       transition: opacity 1400ms ease-in-out;
+
+      html[data-visual-test] & {
+        transition-duration: 1ms !important;
+      }
     }
     &:not(.dnb-step-indicator__item--visited)
       .dnb-button:not(.dnb-step-indicator__button__status)

package/cjs/components/step-indicator/style/dnb-step-indicator.css

@@ -174,12 +174,20 @@
     -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;
@@ -223,6 +231,10 @@
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2; }
+  html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button, html[data-visual-test]
+  .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button {
+    -webkit-transition-duration: 1ms !important;
+            transition-duration: 1ms !important; }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__trigger button.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem; }
@@ -233,6 +245,9 @@
     opacity: 1;
     -webkit-transition: opacity 1400ms ease-in-out;
     transition: opacity 1400ms ease-in-out; }
+    html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon {
+      -webkit-transition-duration: 1ms !important;
+              transition-duration: 1ms !important; }
   .dnb-step-indicator-v2 .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status)
 .dnb-button__icon {
     opacity: 0; }

package/cjs/components/step-indicator/style/dnb-step-indicator.min.css

@@ -1,2 +1,2 @@
-.dnb-step-indicator{-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-step-indicator *,.dnb-step-indicator :after,.dnb-step-indicator :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-step-indicator :after,.dnb-step-indicator :before{text-decoration:inherit;vertical-align:inherit}.dnb-step-indicator-v1 .dnb-step-indicator{display:block;padding:0;position:relative;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;list-style:none;margin:0;padding:0}.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list,.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list li{margin-bottom:0;margin-top:0}.dnb-step-indicator-v1 .dnb-step-indicator__item{-ms-flex-item-align:end;align-self:flex-end}.dnb-step-indicator-v1 .dnb-step-indicator__item-content{font-size:1.125rem;font-size:var(--font-size-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link,.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static,.dnb-step-indicator-v1 .dnb-step-indicator__item-content.dnb-anchor,.dnb-step-indicator-v1 .dnb-step-indicator__item-contenta{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border-bottom:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;margin:0;padding:.25rem;position:relative;text-decoration:none;z-index:2}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link.dnb-anchor{line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled],html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled]{cursor:not-allowed}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){--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-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){-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-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after{content:none}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--number{padding-right:.25rem;white-space:nowrap}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--text{text-align:left}.dnb-step-indicator-v1 .dnb-step-indicator__item-content:after{border-radius:1.5px;bottom:0;content:"";height:3px;left:0;position:absolute;width:100%;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator:after{background-color:currentColor;bottom:0;-webkit-box-shadow:100vw 0 0 0 currentColor;box-shadow:100vw 0 0 0 currentColor;color:#000;color:var(--color-black);content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-step-indicator__sidebar{margin-right:3rem;margin-right:var(--spacing-x-large);max-width:20rem}.dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:320px}.dnb-step-indicator-v2 .dnb-step-indicator__list{list-style:none;margin:0;padding:0}.dnb-step-indicator-v2 .dnb-step-indicator__list,.dnb-step-indicator-v2 .dnb-step-indicator__trigger{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:.25rem;justify-content:space-between;overflow:hidden;-webkit-transition:height .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1);will-change:height}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text{text-align:left}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text{margin-right:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__alignment,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__alignment{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-step-indicator-v2 .dnb-step-indicator__trigger button.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{margin-top:.5rem}.dnb-step-indicator-v2 .dnb-step-indicator__item{margin-bottom:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon{opacity:1;-webkit-transition:opacity 1.4s ease-in-out;transition:opacity 1.4s ease-in-out}.dnb-step-indicator-v2 .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status)
+.dnb-step-indicator{-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-step-indicator *,.dnb-step-indicator :after,.dnb-step-indicator :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-step-indicator :after,.dnb-step-indicator :before{text-decoration:inherit;vertical-align:inherit}.dnb-step-indicator-v1 .dnb-step-indicator{display:block;padding:0;position:relative;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;list-style:none;margin:0;padding:0}.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list,.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list li{margin-bottom:0;margin-top:0}.dnb-step-indicator-v1 .dnb-step-indicator__item{-ms-flex-item-align:end;align-self:flex-end}.dnb-step-indicator-v1 .dnb-step-indicator__item-content{font-size:1.125rem;font-size:var(--font-size-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link,.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static,.dnb-step-indicator-v1 .dnb-step-indicator__item-content.dnb-anchor,.dnb-step-indicator-v1 .dnb-step-indicator__item-contenta{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border-bottom:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;margin:0;padding:.25rem;position:relative;text-decoration:none;z-index:2}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link.dnb-anchor{line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled],html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled]{cursor:not-allowed}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){--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-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){-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-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after{content:none}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--number{padding-right:.25rem;white-space:nowrap}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--text{text-align:left}.dnb-step-indicator-v1 .dnb-step-indicator__item-content:after{border-radius:1.5px;bottom:0;content:"";height:3px;left:0;position:absolute;width:100%;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator:after{background-color:currentColor;bottom:0;-webkit-box-shadow:100vw 0 0 0 currentColor;box-shadow:100vw 0 0 0 currentColor;color:#000;color:var(--color-black);content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}@media screen and (min-width:50.1em){.dnb-step-indicator__sidebar{margin-right:3rem;margin-right:var(--spacing-x-large);max-width:20rem}.dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:320px}}@media screen and (max-width:50.1em){.dnb-step-indicator__sidebar--ssr-skeleton{height:5.5rem;overflow:hidden;visibility:hidden;width:0}}.dnb-step-indicator-v2 .dnb-step-indicator__list{list-style:none;margin:0;padding:0}.dnb-step-indicator-v2 .dnb-step-indicator__list,.dnb-step-indicator-v2 .dnb-step-indicator__trigger{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:.25rem;justify-content:space-between;overflow:hidden;-webkit-transition:height .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1);will-change:height}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text{text-align:left}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text{margin-right:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__alignment,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__alignment{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-step-indicator-v2 .dnb-step-indicator__trigger button.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{margin-top:.5rem}.dnb-step-indicator-v2 .dnb-step-indicator__item{margin-bottom:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon{opacity:1;-webkit-transition:opacity 1.4s ease-in-out;transition:opacity 1.4s ease-in-out}html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-step-indicator-v2 .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status)
 .dnb-button__icon{opacity:0}.dnb-step-indicator-v2 .dnb-step-indicator__item-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding:.5rem 0}.dnb-step-indicator-v2 .dnb-step-indicator__item-content__number{padding-right:.5rem;white-space:nowrap}.dnb-step-indicator-v2 .dnb-step-indicator__item-content__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:#333;color:var(--color-black-80);font-size:.875rem;font-size:var(--font-size-x-small)}

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

@@ -281,7 +281,7 @@ legend.dnb-form-label {
   .dnb-form-status[hidden] {
     display: none; }
   .dnb-form-status--no-animation,
-  .dnb-form-status html[data-visual-test] {
+  html[data-visual-test] .dnb-form-status {
     -webkit-transition-duration: 1ms !important;
             transition-duration: 1ms !important; }
   @media screen and (-ms-high-contrast: none) {