@dnb/eufemia 9.12.0 → 9.12.4

package/components/number-format/NumberUtils.js

@@ -30,7 +30,7 @@ import "core-js/modules/es.array.find.js";
 import React from 'react';
 import Context from '../../shared/Context';
 import { LOCALE, CURRENCY, CURRENCY_DISPLAY } from '../../shared/defaults';
-import { warn, isTrue, slugify } from '../../shared/component-helper';
+import { warn, isTrue, slugify, escapeRegexChars } from '../../shared/component-helper';
 import { getOffsetTop, getOffsetLeft, getSelectedElement, copyToClipboard, IS_MAC, IS_WIN, IS_IE11, IS_SAFARI } from '../../shared/helpers';
 var NUMBER_CHARS = '\\-0-9,.';
 export var format = function format(value) {
@@ -236,26 +236,31 @@ export var format = function format(value) {
     aria = display;
   }
 
-  var cleanedValue = formatNumber(value, locale, opts, function (item) {
-    switch (item.type) {
-      case 'currency':
-      case 'group':
-      case 'literal':
-        item.value = '';
-        return item;
+  if (returnAria) {
+    var cleanedValue = formatNumber(opts.style === 'percent' ? value / 100 : value, locale, opts, function (item) {
+      switch (item.type) {
+        case 'currency':
+        case 'group':
+        case 'literal':
+        case 'percentSign':
+          item.value = '';
+          return item;
 
-      default:
-        return item;
-    }
-  });
-  return returnAria ? {
-    value: value,
-    cleanedValue: cleanedValue,
-    number: display,
-    aria: aria,
-    locale: locale,
-    type: type
-  } : display;
+        default:
+          return item;
+      }
+    });
+    return {
+      value: value,
+      cleanedValue: cleanedValue,
+      number: display,
+      aria: aria,
+      locale: locale,
+      type: type
+    };
+  }
+
+  return display;
 };
 export var formatDecimals = function formatDecimals(value, decimals) {
   var omit_rounding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -521,6 +526,12 @@ export var formatNIN = function formatNIN(number) {
   };
 };
 export function cleanNumber(num) {
+  var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref4$decimalSeparato = _ref4.decimalSeparator,
+      decimalSeparator = _ref4$decimalSeparato === void 0 ? null : _ref4$decimalSeparato,
+      _ref4$thousandsSepara = _ref4.thousandsSeparator,
+      thousandsSeparator = _ref4$thousandsSepara === void 0 ? null : _ref4$thousandsSepara;
+
   if (typeof num === 'number') {
     return num;
   }
@@ -528,42 +539,47 @@ export function cleanNumber(num) {
   num = String(num).trim();
 
   if (/^[^0-9-]/.test(num)) {
-    num.replace(/^(^[^0-9-]+)/, '');
+    num = num.replace(/^(^[^0-9-]+)/, '');
   }
 
-  var usesThousand = ',';
-  var usesDecimal = '\\.';
+  var decimal = decimalSeparator;
+  var thousands = thousandsSeparator;
 
   if (/(\s)([0-9]{3})/.test(num)) {
-    usesThousand = '\\s';
-    usesDecimal = ',';
+    thousands = thousands || '\\s';
+    decimal = decimal || ',';
   } else if (/(\.)([0-9]{3})/.test(num) && !/([,'][0-9]{3})(\.)([0-9]{3})/.test(num)) {
-    usesThousand = '\\.';
-    usesDecimal = ",|·|'";
+    thousands = thousands || '\\.';
+    decimal = decimal || ",|·|'";
   } else if (/(,)([0-9]{3})/.test(num)) {
-    usesThousand = ',';
-    usesDecimal = '\\.|·';
+    thousands = thousands || ',';
+    decimal = decimal || '\\.|·';
   } else if (/(')([0-9]{3})/.test(num)) {
-    usesThousand = "'";
-    usesDecimal = '\\.|,';
+    thousands = thousands || "'";
+    decimal = decimal || '\\.|,';
+  } else {
+    thousands = ',';
+    decimal = '\\.';
   }
 
-  var thousandReg = new RegExp("([0-9]|)(".concat(usesThousand, ")([0-9]{3})"), 'g');
+  var thousandReg = thousandsSeparator ? new RegExp("([0-9]|)(".concat(escapeRegexChars(thousandsSeparator), ")([0-9]{3})"), 'g') : new RegExp("([0-9]|)(".concat(thousands, ")([0-9]{3})"), 'g');
 
   if (thousandReg.test(num)) {
     num = num.replace(thousandReg, '$1$3');
   }
 
-  var decimalReg = new RegExp("(".concat(usesDecimal, ")([0-9]{1,2})"), 'g');
+  var decimalReg = decimalSeparator ? new RegExp("(".concat(escapeRegexChars(decimalSeparator), ")([0-9]{0,})"), 'g') : new RegExp("(".concat(decimal, ")([0-9]{1,2})"), 'g');
 
   if (decimalReg.test(num)) {
     num = num.replace(decimalReg, '.$2');
   }
 
-  var decimalBackup = new RegExp("(".concat(usesDecimal, ")([0-9]{3,})"), 'g');
+  if (!decimalSeparator) {
+    var decimalBackup = new RegExp("(".concat(decimal, ")([0-9]{3,})"), 'g');
 
-  if (decimalBackup.test(num)) {
-    num = num.replace(decimalBackup, '.$2');
+    if (decimalBackup.test(num)) {
+      num = num.replace(decimalBackup, '.$2');
+    }
   }
 
   return num.replace(new RegExp("([^".concat(NUMBER_CHARS, "])"), 'g'), '');
@@ -635,11 +651,11 @@ function _copyWithEffect() {
   return _copyWithEffect.apply(this, arguments);
 }
 
-export function showSelectionNotice(_ref4) {
-  var value = _ref4.value,
-      label = _ref4.label,
-      _ref4$timeout = _ref4.timeout,
-      timeout = _ref4$timeout === void 0 ? 3e3 : _ref4$timeout;
+export function showSelectionNotice(_ref5) {
+  var value = _ref5.value,
+      label = _ref5.label,
+      _ref5$timeout = _ref5.timeout,
+      timeout = _ref5$timeout === void 0 ? 3e3 : _ref5$timeout;
   var id = 'id-' + slugify(value);
 
   if (typeof document !== 'undefined' && document.getElementById(id)) {
@@ -741,8 +757,8 @@ export function getDecimalSeparator() {
   var separator = ((_formatToParts$find = formatToParts({
     number: 1.1,
     locale: locale
-  }).find(function (_ref5) {
-    var type = _ref5.type;
+  }).find(function (_ref6) {
+    var type = _ref6.type;
     return type === 'decimal';
   })) === null || _formatToParts$find === void 0 ? void 0 : _formatToParts$find.value) || ',';
   return separator;
@@ -755,8 +771,8 @@ export function getThousandsSeparator() {
   return ((_formatToParts$map$fi = formatToParts({
     number: 1000,
     locale: locale
-  }).map(formatter).find(function (_ref6) {
-    var type = _ref6.type;
+  }).map(formatter).find(function (_ref7) {
+    var type = _ref7.type;
     return type === 'group';
   })) === null || _formatToParts$map$fi === void 0 ? void 0 : _formatToParts$map$fi.value) || ' ';
 }
@@ -779,8 +795,8 @@ export function getCurrencySymbol() {
       currency: currency,
       currencyDisplay: getFallbackCurrencyDisplay(locale, currencyDisplay)
     }
-  }).find(function (_ref7) {
-    var type = _ref7.type;
+  }).find(function (_ref8) {
+    var type = _ref8.type;
     return type === 'currency';
   })) === null || _formatToParts$find2 === void 0 ? void 0 : _formatToParts$find2.value) || currency;
 }
@@ -807,12 +823,12 @@ function getGroupFormatter() {
   };
 }
 
-function formatToParts(_ref8) {
-  var number = _ref8.number,
-      _ref8$locale = _ref8.locale,
-      locale = _ref8$locale === void 0 ? null : _ref8$locale,
-      _ref8$options = _ref8.options,
-      options = _ref8$options === void 0 ? null : _ref8$options;
+function formatToParts(_ref9) {
+  var number = _ref9.number,
+      _ref9$locale = _ref9.locale,
+      locale = _ref9$locale === void 0 ? null : _ref9$locale,
+      _ref9$options = _ref9.options,
+      options = _ref9$options === void 0 ? null : _ref9$options;
 
   if (typeof Intl !== 'undefined' && typeof Intl.NumberFormat === 'function') {
     try {

package/components/step-indicator/StepIndicator.d.ts

@@ -1,5 +1,69 @@
 import * as React from 'react';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
+export type StepIndicatorMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorData =
+  | 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;
+    }[];
+export type StepIndicatorTitle = string | React.ReactNode;
+export type StepIndicatorStatus = string | React.ReactNode;
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorIsActive = string | boolean;
+export type StepIndicatorCurrentStep = string | number;
+export type StepIndicatorActiveItem = string | number;
+export type StepIndicatorHideNumbers = string | boolean;
+export type StepIndicatorUseNavigation = string | boolean;
+export type StepIndicatorNoAnimation = string | boolean;
+export type StepIndicatorSkeleton = string | boolean;
+export type StepIndicatorSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type StepIndicatorTop = string | number | boolean;
+export type StepIndicatorRight = string | number | boolean;
+export type StepIndicatorBottom = string | number | boolean;
+export type StepIndicatorLeft = string | number | boolean;
+export type StepIndicatorChildren =
+  | React.ReactNode
+  | ((...args: any[]) => any);
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,6 +73,92 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
    * 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?: StepIndicatorMode;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   */
+  data: StepIndicatorData;
+  title: StepIndicatorTitle;
+  is_current?: boolean;
+  inactive?: boolean;
+  disabled?: boolean;
+  status?: StepIndicatorStatus;
+  status_state?: StepIndicatorStatusState;
+
+  /**
+   * 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?: StepIndicatorIsActive;
+  url_future?: string;
+  url_passed?: string;
+  overview_title?: string;
+  step_title_extended?: string;
+  step_title?: string;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorCurrentStep;
+  active_item?: StepIndicatorActiveItem;
+  active_url?: string;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: StepIndicatorHideNumbers;
+  use_navigation?: StepIndicatorUseNavigation;
+
+  /**
+   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+   */
+  on_item_render?: (...args: any[]) => any;
+
+  /**
+   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false.
+   */
+  no_animation?: StepIndicatorNoAnimation;
+  skeleton?: StepIndicatorSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: StepIndicatorSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: StepIndicatorTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: StepIndicatorRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: StepIndicatorBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: StepIndicatorLeft;
+  class?: string;
+  className?: string;
+  children?: StepIndicatorChildren;
+
+  /**
+   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   */
+  on_change?: (...args: any[]) => any;
 }
 export default class StepIndicator extends React.Component<
   StepIndicatorProps,

package/components/step-indicator/StepIndicator.js

@@ -39,7 +39,7 @@ import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import StepIndicatorList from './StepIndicatorList';
 import { StepIndicatorProvider } from './StepIndicatorContext';
-import { stepIndicatorPropsTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
+import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
 
 var StepIndicator = function (_React$PureComponent) {
   _inherits(StepIndicator, _React$PureComponent);
@@ -208,4 +208,4 @@ _defineProperty(StepIndicator, "defaultProps", _objectSpread({
 export { StepIndicator as default };
 process.env.NODE_ENV !== "production" ? StepIndicator.propTypes = _objectSpread({
   sidebar_id: PropTypes.string
-}, stepIndicatorPropsTypes) : void 0;
+}, stepIndicatorPropTypes) : void 0;

package/components/step-indicator/StepIndicatorProps.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../space/SpacingHelper';
-export var stepIndicatorPropsTypes = _objectSpread(_objectSpread({
+export var stepIndicatorPropTypes = _objectSpread(_objectSpread({
   mode: PropTypes.oneOf(['static', 'strict', 'loose']),
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.css

@@ -0,0 +1,186 @@
+/*
+* StepIndicator theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Deprecated v1
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link {
+  color: #007272;
+  color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item {
+  margin-left: 4.5rem; }
+  .dnb-step-indicator-v1 .dnb-step-indicator__item:first-child {
+    margin-left: 0; }
+  @media screen and (max-width: 50em) {
+    .dnb-step-indicator-v1 .dnb-step-indicator__item {
+      margin-left: 2rem; } }
+
+.dnb-step-indicator-v1 .dnb-step-indicator::after {
+  color: #a5e1d2;
+  color: var(--color-mint-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item::after,
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content::after {
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator span[hidden],
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover),
+  .dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover) {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  --border-color: var(--color-sea-green);
+  -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+          box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent; }
+  @supports (-webkit-touch-callout: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+      -webkit-box-shadow: inset 0 0 0 1px #007272;
+              box-shadow: inset 0 0 0 1px #007272;
+      -webkit-box-shadow: inset 0 0 0 1px var(--color-sea-green);
+              box-shadow: inset 0 0 0 1px var(--color-sea-green); } }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button {
+  background-color: #f2f4ec;
+  background-color: var(--color-pistachio); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button {
+  cursor: text;
+  pointer-events: initial;
+  -webkit-user-select: initial;
+     -moz-user-select: initial;
+      -ms-user-select: initial;
+          user-select: initial; }
+  .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-black-20);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: inset 0 0 0 1px #ccc;
+                box-shadow: inset 0 0 0 1px #ccc;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-20);
+                box-shadow: inset 0 0 0 1px var(--color-black-20); } }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+  --border-color: var(--color-black-80);
+  -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+          box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent; }
+  @supports (-webkit-touch-callout: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+      -webkit-box-shadow: inset 0 0 0 1px #333;
+              box-shadow: inset 0 0 0 1px #333;
+      -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
+              box-shadow: inset 0 0 0 1px var(--color-black-80); } }
+
+html[data-whatinput='keyboard']
+.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus {
+  color: #14555a;
+  color: var(--color-emerald-green);
+  background-color: #a5e1d2;
+  background-color: var(--color-mint-green); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__label, .dnb-step-indicator-v2 .dnb-step-indicator__label.dnb-p {
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  margin-bottom: 0.5rem; }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status.dnb-button--secondary {
+  background-color: #fbf6ec;
+  background-color: var(--color-sand-yellow); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status--error.dnb-button--secondary {
+  background-color: #fdeeee;
+  background-color: var(--color-fire-red-8); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status--info.dnb-button--secondary {
+  background-color: #f2f4ec;
+  background-color: var(--color-pistachio); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-button__icon {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  margin-top: 1rem;
+  margin-right: 0.75rem; }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
+  font-weight: normal;
+  font-weight: var(--font-weight-basis); }
+
+.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-size: var(--font-size-x-small);
+  line-height: 1.125rem;
+  line-height: var(--font-size-basis);
+  color: #333;
+  color: var(--color-black-80); }

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss

@@ -4,7 +4,7 @@
 */
 
 @import '../../../../style/themes/imports.scss';
-@import './dnb-step-indicator-theme-ui-v1.scss';
+@import './dnb-step-indicator-v1-theme-ui.scss';
 
 .dnb-step-indicator-v2 .dnb-step-indicator {
   &__item {

package/components/step-indicator/style/themes/dnb-step-indicator-v1-theme-ui.css

@@ -0,0 +1,45 @@
+/*
+* Deprecated v1
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link {
+  color: #007272;
+  color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item {
+  margin-left: 4.5rem; }
+  .dnb-step-indicator-v1 .dnb-step-indicator__item:first-child {
+    margin-left: 0; }
+  @media screen and (max-width: 50em) {
+    .dnb-step-indicator-v1 .dnb-step-indicator__item {
+      margin-left: 2rem; } }
+
+.dnb-step-indicator-v1 .dnb-step-indicator::after {
+  color: #a5e1d2;
+  color: var(--color-mint-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item::after,
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content::after {
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator span[hidden],
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover),
+  .dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover) {
+    color: #14555a;
+    color: var(--color-emerald-green); }

package/{es/components/step-indicator/style/themes/dnb-step-indicator-theme-ui-v1.scss → components/step-indicator/style/themes/dnb-step-indicator-v1-theme-ui.scss}

@@ -3,6 +3,8 @@
 *
 */
 
+@import '../../../../style/themes/imports.scss';
+
 .dnb-step-indicator-v1 .dnb-step-indicator {
   &__item-content {
     // so we can se the bottom line on anchor hover