@dnb/eufemia 9.12.4 → 9.13.0

package/es/components/button/style/themes/dnb-button-theme-open-banking.css

@@ -593,16 +593,16 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -615,17 +615,17 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }

package/es/components/button/style/themes/dnb-button-theme-ui.css

@@ -589,16 +589,16 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -611,17 +611,17 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }

package/es/components/button/style/themes/dnb-button-theme-ui.scss

@@ -321,6 +321,7 @@
     @include buttonHover(
       var(--color-ocean-green),
       var(--color-accent-yellow),
+      var(--color-ocean-green),
       'touch'
     );
     @include buttonFocus(

package/es/components/date-picker/DatePickerAddon.js

@@ -56,7 +56,7 @@ export default class DatePickerAddon extends React.PureComponent {
     endDate,
     event = null
   } = {}) {
-    this.context.setDate({
+    this.context.updateState({
       startDate,
       endDate,
       changeMonthViews: true

package/es/components/date-picker/DatePickerCalendar.js

@@ -136,7 +136,7 @@ export default class DatePickerCalendar extends React.PureComponent {
         }
 
         state.changeMonthViews = true;
-        this.context.setDate(state, () => {
+        this.context.updateState(state, () => {
           this.callOnSelect({
             event,
             nr,
@@ -448,7 +448,7 @@ export default class DatePickerCalendar extends React.PureComponent {
             endDate,
             resetDate,
             event,
-            onSelect: state => this.context.setDate(state, () => this.callOnSelect({
+            onSelect: state => this.context.updateState(state, () => this.callOnSelect({
               event,
               nr,
               hidePicker: !isRange

package/es/components/date-picker/DatePickerFooter.js

@@ -37,7 +37,7 @@ export default class DatePickerFooter extends React.PureComponent {
         args.event.persist();
       }
 
-      this.context.setDate({
+      this.context.updateState({
         startDate,
         endDate
       }, () => {
@@ -56,7 +56,7 @@ export default class DatePickerFooter extends React.PureComponent {
         args.event.persist();
       }
 
-      this.context.setDate({
+      this.context.updateState({
         date: undefined,
         startDate: undefined,
         endDate: undefined

package/es/components/date-picker/DatePickerInput.js

@@ -81,26 +81,23 @@ export default class DatePickerInput extends React.PureComponent {
     });
 
     _defineProperty(this, "callOnChangeAsInvalid", state => {
-      const {
-        startDate,
-        endDate,
-        event
-      } = _objectSpread(_objectSpread({}, this.context), state);
-
       this.context.updateState({
         hoverDate: null
-      });
+      }, () => {
+        if (this.context.hasHadValidDate) {
+          const {
+            startDate,
+            endDate,
+            event
+          } = _objectSpread(_objectSpread({}, this.context), state);
 
-      if (this.context.hasHadValidDate) {
-        this.context.callOnChangeHandler({
-          startDate,
-          endDate,
-          event
-        });
-        this.context.updateState({
-          hasHadValidDate: false
-        });
-      }
+          this.context.callOnChangeHandler({
+            startDate,
+            endDate,
+            event
+          });
+        }
+      });
     });
 
     _defineProperty(this, "callOnChange", ({
@@ -109,8 +106,7 @@ export default class DatePickerInput extends React.PureComponent {
       event
     }) => {
       const state = {
-        changeMonthViews: true,
-        hasHadValidDate: false
+        changeMonthViews: true
       };
 
       if (typeof startDate !== 'undefined' && isValid(startDate)) {
@@ -125,7 +121,7 @@ export default class DatePickerInput extends React.PureComponent {
         state.endDate = endDate;
       }
 
-      this.context.setDate(state, () => {
+      this.context.updateState(state, () => {
         if (typeof startDate !== 'undefined' && isValid(startDate) || typeof endDate !== 'undefined' && isValid(endDate)) {
           this.context.callOnChangeHandler({
             event
@@ -356,7 +352,7 @@ export default class DatePickerInput extends React.PureComponent {
           event
         });
       } else {
-        this.context.setDate({
+        this.context.updateState({
           [`${mode}Date`]: null
         });
         this.context.updateState({

package/es/components/date-picker/DatePickerProvider.js

@@ -84,7 +84,7 @@ export default class DatePickerProvider extends React.PureComponent {
       }
     }
 
-    if (state.lastEventCallCache && (String(state.lastEventCallCache.startDate) !== String(state.startDate) || String(state.lastEventCallCache.endDate) !== String(state.endDate))) {
+    if (state.lastEventCallCache && (state.lastEventCallCache.startDate !== state.startDate || state.lastEventCallCache.endDate !== state.endDate)) {
       state.lastEventCallCache = {};
     }
 
@@ -92,6 +92,7 @@ export default class DatePickerProvider extends React.PureComponent {
       state.__startDay = pad(format(state.startDate, 'dd'), 2);
       state.__startMonth = pad(format(state.startDate, 'MM'), 2);
       state.__startYear = format(state.startDate, 'yyyy');
+      state.hasHadValidDate = true;
     } else if (state.startDate === undefined) {
       state.__startDay = null;
       state.__startMonth = null;
@@ -102,6 +103,7 @@ export default class DatePickerProvider extends React.PureComponent {
       state.__endDay = pad(format(state.endDate, 'dd'), 2);
       state.__endMonth = pad(format(state.endDate, 'MM'), 2);
       state.__endYear = format(state.endDate, 'yyyy');
+      state.hasHadValidDate = true;
     } else if (state.endDate === undefined) {
       state.__endDay = null;
       state.__endMonth = null;
@@ -160,19 +162,8 @@ export default class DatePickerProvider extends React.PureComponent {
       }), cb);
     });
 
-    _defineProperty(this, "setDate", (state, cb = null) => {
-      this.setState(_objectSpread(_objectSpread({}, state), {}, {
-        _listenForPropChanges: false
-      }), cb);
-      const startDateIsValid = Boolean(state.startDate && isValid(state.startDate));
-      const endDateIsValid = Boolean(state.endDate && isValid(state.endDate));
-      this.setState({
-        hasHadValidDate: startDateIsValid || endDateIsValid
-      });
-    });
-
     _defineProperty(this, "callOnChangeHandler", args => {
-      if (this.state.lastEventCallCache && String(this.state.lastEventCallCache.startDate) === String(this.state.startDate) && String(this.state.lastEventCallCache.endDate) === String(this.state.endDate)) {
+      if (this.state.lastEventCallCache && this.state.lastEventCallCache.startDate === this.state.startDate && this.state.lastEventCallCache.endDate === this.state.endDate) {
         return;
       }
 
@@ -254,7 +245,6 @@ export default class DatePickerProvider extends React.PureComponent {
       value: _objectSpread(_objectSpread({
         translation: this.context.translation,
         setViews: this.setViews,
-        setDate: this.setDate,
         updateState: this.updateState,
         getReturnObject: this.getReturnObject,
         callOnChangeHandler: this.callOnChangeHandler,

package/es/components/global-status/GlobalStatus.d.ts

@@ -95,7 +95,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   state?: GlobalStatusState;
 
   /**
-   * Set to `true` or `false` to manually make the global status visible. Defaults to `show`.
+   * Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
    */
   show?: GlobalStatusShow;
 

package/es/components/input-masked/InputMasked.js

@@ -13,12 +13,12 @@ import { format, cleanNumber, getCurrencySymbol, getDecimalSeparator, getThousan
 import Input, { inputPropTypes } from '../input/Input';
 import { warn, isTrue, registerElement, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { IS_IE11 } from '../../shared/helpers';
-import _MaskedInput from 'react-text-mask';
+import TextMask from 'react-text-mask';
 import Context from '../../shared/Context';
 import createNumberMask from './addons/createNumberMask';
 import classnames from 'classnames';
 import keycode from 'keycode';
-const MaskedInput = _MaskedInput.default || _MaskedInput;
+const MaskedInput = TextMask.default || TextMask;
 export default class InputMasked extends React.PureComponent {
   static enableWebComponent() {
     registerElement(InputMasked === null || InputMasked === void 0 ? void 0 : InputMasked.tagName, InputMasked, InputMasked.defaultProps);
@@ -150,24 +150,17 @@ export default class InputMasked extends React.PureComponent {
         allowDecimal: ((_number_mask = number_mask) === null || _number_mask === void 0 ? void 0 : _number_mask.decimalLimit) > 0,
         decimalSymbol: ','
       }, (_this$context5 = this.context) === null || _this$context5 === void 0 ? void 0 : (_this$context5$InputM = _this$context5.InputMasked) === null || _this$context5$InputM === void 0 ? void 0 : _this$context5$InputM.number_mask), number_mask);
-      props.align = props.align || 'right';
     } else if (currency_mask) {
       var _this$context6, _this$context6$InputM;
 
       show_mask = true;
       placeholder_char = null;
-      props.align = props.align || 'right';
       maskParams = _objectSpread(_objectSpread({
         allowDecimal: true,
         decimalSymbol: ','
       }, (_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : (_this$context6$InputM = _this$context6.InputMasked) === null || _this$context6$InputM === void 0 ? void 0 : _this$context6$InputM.currency_mask), currency_mask);
       const fix = typeof currency_mask === 'string' ? currency_mask : typeof currency_mask.currency === 'string' ? currency_mask.currency : 'kr';
-
-      if (props.align === 'left') {
-        maskParams.prefix = `${fix} `;
-      } else {
-        maskParams.suffix = ` ${fix}`;
-      }
+      maskParams.suffix = ` ${fix}`;
     }
 
     if (maskParams) {
@@ -240,21 +233,21 @@ export default class InputMasked extends React.PureComponent {
         };
 
         props.onMouseUp = event => {
-          fixPositionIssue(event.target, props);
+          correctPositionSelection(event, maskParams);
           callEvent({
             event
           }, 'on_mouse_up');
         };
 
         props.onTouchEnd = event => {
-          fixPositionIssue(event.target, props);
+          correctPositionSelection(event, maskParams);
           callEvent({
             event
           }, 'on_touch_end');
         };
 
         props.on_focus = params => {
-          fixPositionIssue(params.event.target, props);
+          correctPositionSelection(params.event, maskParams);
           callEvent(params, 'on_focus');
         };
 
@@ -337,26 +330,29 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_focus: PropTypes.func,
   on_submit_blur: PropTypes.func
 }, inputPropTypes) : void 0;
-export const fixPositionIssue = (elem, {
-  align = 'right'
-} = {}) => {
+export const correctPositionSelection = (event, maskParams) => {
   clearTimeout(_selectionTimeout);
   _selectionTimeout = setTimeout(() => {
-    if (cleanNumber(elem.value).length > 0) {
-      return;
-    }
-
     try {
-      const end = elem.selectionEnd;
+      const fix = (maskParams === null || maskParams === void 0 ? void 0 : maskParams.suffix) || (maskParams === null || maskParams === void 0 ? void 0 : maskParams.prefix);
 
-      if (elem.selectionStart === end && end === elem.value.length) {
-        let pos = 0;
+      if (fix) {
+        const elem = event.target;
+        const start = elem.selectionStart;
+        const fixStart = elem.value.indexOf(fix);
+        const fixEnd = fixStart + fix.length;
 
-        if (align === 'left') {
-          pos = end - 1;
-        }
+        if (start >= fixStart && start <= fixEnd) {
+          let pos = 0;
+
+          if (fixStart === 1) {
+            pos = fixStart - 1;
+          } else {
+            pos = fixStart;
+          }
 
-        elem.setSelectionRange(pos, pos);
+          elem.setSelectionRange(pos, pos);
+        }
       }
     } catch (e) {
       warn(e);

package/es/components/modal/ModalContent.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["triggeredBy"],
-      _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
+      _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
 
 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; }
 
@@ -270,6 +270,7 @@ export default class ModalContent extends React.PureComponent {
       header_content,
       modal_content,
       bar_content,
+      id: _id,
       close_title,
       dialog_title,
       hide_close_button,
@@ -310,9 +311,10 @@ export default class ModalContent extends React.PureComponent {
       minWidth = 0;
     }
 
+    const useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS);
     const contentParams = {
-      role: IS_MAC || IS_SAFARI || IS_IOS ? undefined : 'dialog',
-      'aria-modal': 'true',
+      role: useDialogRole ? 'dialog' : 'region',
+      'aria-modal': useDialogRole ? 'true' : undefined,
       'aria-labelledby': combineLabelledBy(this.props, title ? id + '-title' : null, labelled_by),
       'aria-describedby': combineDescribedBy(this.props, id + '-content'),
       'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,

package/es/fragments/drawer-list/DrawerListProvider.js

@@ -127,6 +127,10 @@ export default class DrawerListProvider extends React.PureComponent {
             }
           }
 
+          if (isTrue(this.props.no_animation)) {
+            scrollTo = false;
+          }
+
           this.scrollToItem(active_item, {
             scrollTo
           });
@@ -480,7 +484,9 @@ export default class DrawerListProvider extends React.PureComponent {
           attributes: this.attributes,
           ulElement: this._refUl.current
         });
-        this.setActiveItemAndScrollToIt(parseFloat(active_item) > -1 ? active_item : -1);
+        this.setActiveItemAndScrollToIt(parseFloat(active_item) > -1 ? active_item : -1, {
+          scrollTo: false
+        });
       };
 
       if (DrawerListProvider.isOpen && !isTrue(this.props.no_animation)) {

package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css

@@ -2068,6 +2068,10 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
   color: #fff;
   color: var(--color-white); }
 
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: #fff;
+  color: var(--color-white); }
+
 /*
 * Button theme
 *
@@ -2659,16 +2663,16 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -2681,17 +2685,17 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }
@@ -6017,16 +6021,16 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -6039,17 +6043,17 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }