@dnb/eufemia 9.12.1 → 9.13.0

package/cjs/components/autocomplete/Autocomplete.js

@@ -18,20 +18,24 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 
 require("core-js/modules/es.array.index-of.js");
 
-require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.object.to-string.js");
 
-require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/es.weak-map.js");
+require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.string.iterator.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/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -41,6 +45,8 @@ require("core-js/modules/es.string.trim.js");
 
 require("core-js/modules/es.array.slice.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.includes.js");
 
 require("core-js/modules/es.array.filter.js");
@@ -57,12 +63,12 @@ require("core-js/modules/es.regexp.constructor.js");
 
 require("core-js/modules/es.regexp.to-string.js");
 
+require("core-js/modules/es.string.match.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.string.includes.js");
 
-require("core-js/modules/es.array.reduce.js");
-
 require("core-js/modules/es.array.sort.js");
 
 require("core-js/modules/es.array.concat.js");
@@ -114,6 +120,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -258,7 +270,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   input_element: null
 });
 
-process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_objectSpread({
+process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _SpacingHelper.spacingPropTypes), _DrawerListHelpers.drawerListPropTypes), {}, {
   id: _propTypes.default.string,
   mode: _propTypes.default.oneOf(['sync', 'async']),
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
@@ -320,8 +332,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   portal_class: _propTypes.default.string,
-  drawer_class: _propTypes.default.string
-}, _SpacingHelper.spacingPropTypes), {}, {
+  drawer_class: _propTypes.default.string,
   class: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
@@ -392,18 +403,6 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       _this.setVisible();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "scrollToActiveItem", function (active_item) {
-      _this.context.drawerList.scrollToItem(active_item, {
-        scrollTo: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "scrollToSelectedItem", function (selected_item) {
-      _this.context.drawerList.scrollToAndSetActiveItem(selected_item, {
-        scrollTo: false
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "onInputChangeHandler", function (_ref2) {
       var value = _ref2.value,
           event = _ref2.event;
@@ -482,7 +481,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       value = String(value || '').trim();
 
       _this.setState({
-        skipHighlight: false,
+        disableHighlighting: false,
         _listenForPropChanges: false
       });
 
@@ -504,24 +503,28 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "wrapWithShowAll", function (data) {
-      if (!_this.hasFilterActive(data)) {
+      if (!data || !_this.hasFilterActive(data)) {
         return data;
       }
 
-      var lastItem = data.slice(-1)[0];
+      var lastItem = _this.context.drawerList.original_data.slice(-1)[0];
 
       if (lastItem && !lastItem.show_all) {
-        var show_all = _this._props.show_all;
-        data.push({
-          __id: lastItem.__id + 1,
-          class_name: 'dnb-autocomplete__show-all',
-          show_all: true,
-          active_item: false,
-          selected_item: false,
-          content: _react.default.createElement(_react.default.Fragment, null, _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
-            icon: "arrow_down"
-          })), show_all)
-        });
+        var lastActiveItem = data.slice(-1)[0];
+
+        if (lastActiveItem) {
+          data.push({
+            __id: lastItem.__id + 1,
+            lastActiveItem: lastActiveItem.__id,
+            class_name: 'dnb-autocomplete__show-all',
+            show_all: true,
+            active_item: false,
+            selected_item: false,
+            content: _react.default.createElement(_react.default.Fragment, null, _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
+              icon: "arrow_down"
+            })), _this._props.show_all)
+          });
+        }
       }
 
       return data;
@@ -941,7 +944,9 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         cache_hash: 'all'
       });
 
-      _this.scrollToSelectedItem(_this.context.drawerList.selected_item);
+      _this.context.drawerList.setActiveItemAndScrollToIt(_this.context.drawerList.selected_item, {
+        scrollTo: false
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "totalReset", function () {
@@ -956,9 +961,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         _listenForPropChanges: false
       });
 
-      _this.context.drawerList.setState({
-        selected_item: null
-      });
+      _this.resetSelections();
     });
 
     _defineProperty(_assertThisInitialized(_this), "resetSelections", function () {
@@ -981,8 +984,8 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           searchNumbers = _ref5$searchNumbers === void 0 ? (0, _componentHelper.isTrue)(_this.props.search_numbers) : _ref5$searchNumbers,
           _ref5$inWordIndex = _ref5.inWordIndex,
           inWordIndex = _ref5$inWordIndex === void 0 ? (parseFloat(_this.props.search_in_word_index) || 3) - 2 : _ref5$inWordIndex,
-          _ref5$skipHighlight = _ref5.skipHighlight,
-          skipHighlight = _ref5$skipHighlight === void 0 ? false : _ref5$skipHighlight,
+          _ref5$disableHighligh = _ref5.disableHighlighting,
+          disableHighlighting = _ref5$disableHighligh === void 0 ? false : _ref5$disableHighligh,
           _ref5$skipFilter = _ref5.skipFilter,
           skipFilter = _ref5$skipFilter === void 0 ? false : _ref5$skipFilter,
           _ref5$skipReorder = _ref5.skipReorder,
@@ -1000,16 +1003,23 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         return [];
       }
 
-      var words = value.split(/\s+/g).filter(Boolean);
-      var wordsCount = words.length;
+      var searchWords = value.split(/\s+/g).filter(Boolean);
       var wordCond = '^|\\s';
 
-      var findWords = function findWords(searchChunk) {
-        if (typeof searchChunk !== 'string') {
+      var findSearchWords = function findSearchWords(contentChunk) {
+        if (typeof contentChunk !== 'string') {
           return [];
         }
 
-        return words.filter(function (word, wordIndex) {
+        return searchWords.map(function (word, wordIndex) {
+          return {
+            word: word,
+            wordIndex: wordIndex
+          };
+        }).filter(function (_ref6) {
+          var word = _ref6.word,
+              wordIndex = _ref6.wordIndex;
+
           if (searchNumbers) {
             word = word.replace(/[^\d\w]/g, '');
           } else {
@@ -1022,28 +1032,33 @@ var AutocompleteInstance = function (_React$PureComponent2) {
 
           var regexWord = new RegExp(wordIndex > inWordIndex ? "".concat(word) : "(".concat(wordCond, ")").concat(word), 'i');
 
-          if (regexWord.test(searchChunk)) {
+          if (regexWord.test(contentChunk)) {
             return true;
           }
 
-          if (searchNumbers && regexWord.test(searchChunk.replace(/[^0-9]/g, ''))) {
+          if (searchNumbers && regexWord.test(contentChunk.replace(/[^0-9]/g, ''))) {
             return true;
           }
 
           return false;
-        }).map(function (word, wordIndex) {
-          var score = wordsCount - wordIndex;
-          var regexWord = new RegExp("^".concat((0, _componentHelper.escapeRegexChars)(word)), 'i');
-          var startOfWord = regexWord.test(searchChunk);
+        }).map(function (_ref7) {
+          var word = _ref7.word,
+              wordIndex = _ref7.wordIndex;
+          var wordScore = 0;
+          wordScore += (contentChunk.match(new RegExp("(".concat(wordCond, ")").concat((0, _componentHelper.escapeRegexChars)(word)), 'ig')) || []).length;
+
+          if (wordIndex === 0) {
+            var isFirstWord = new RegExp("^".concat((0, _componentHelper.escapeRegexChars)(searchWords[0])), 'i').test(contentChunk.split(' ')[0]);
 
-          if (startOfWord) {
-            score = score + 1;
+            if (isFirstWord) {
+              wordScore += searchWords.length + 1;
+            }
           }
 
           return {
             word: word,
             wordIndex: wordIndex,
-            score: score
+            wordScore: wordScore
           };
         });
       };
@@ -1052,8 +1067,8 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       var strE = "\uFFFF";
       var tagS = '<span class="dnb-drawer-list__option__item--highlight">';
       var tagE = '</span>';
-      searchIndex = searchIndex.map(function (item) {
-        var listOfFoundWords = findWords(item.searchChunk);
+      searchIndex = searchIndex.map(function (item, i) {
+        var listOfFoundWords = findSearchWords(item.contentChunk, i);
 
         if (typeof item.dataItem === 'string') {
           item.dataItem = {
@@ -1066,6 +1081,12 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         }
 
         item.dataItem.render = function (children, id) {
+          var _children2, _children2$props;
+
+          if (disableHighlighting || _this.state.disableHighlighting) {
+            return children;
+          }
+
           var cacheHash = id + value;
           _this._rC = _this._rC || {};
 
@@ -1075,41 +1096,37 @@ var AutocompleteInstance = function (_React$PureComponent2) {
 
           var isComponent = typeof children !== 'string' && _react.default.isValidElement(children);
 
-          if (!Array.isArray(children)) {
+          if (isComponent && Array.isArray((_children2 = children) === null || _children2 === void 0 ? void 0 : (_children2$props = _children2.props) === null || _children2$props === void 0 ? void 0 : _children2$props.children)) {
+            children = children.props.children;
+          } else if (!Array.isArray(children)) {
             children = [children];
           }
 
-          children = children.map(function (component) {
+          children = children.map(function (originalChild) {
             return {
-              component: component,
-              segment: (0, _componentHelper.convertJsxToString)(component)
+              originalChild: originalChild,
+              segment: (0, _componentHelper.convertJsxToString)(originalChild, ' ').trim()
             };
           });
-          children = children.map(function (_ref6, idx) {
-            var component = _ref6.component,
-                segment = _ref6.segment;
-
-            if (skipHighlight || _this.state.skipHighlight) {
-              return segment;
-            }
-
-            var origSegment = segment;
-            listOfFoundWords.forEach(function (_ref7) {
-              var word = _ref7.word,
-                  wordIndex = _ref7.wordIndex;
-              word = (0, _componentHelper.escapeRegexChars)(word);
-
-              if (searchNumbers) {
-                word.split('').forEach(function (char) {
-                  if (/[\d\w]/.test(char)) {
-                    segment = segment.replace(new RegExp("(".concat(char, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
-                  }
-                });
-              } else {
-                if (wordIndex > inWordIndex) {
-                  segment = segment.replace(new RegExp("(".concat(word, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
+          children = children.map(function (_ref8, idx) {
+            var originalChild = _ref8.originalChild,
+                segment = _ref8.segment;
+            searchWords.forEach(function (word, wordIndex) {
+              if (segment) {
+                word = (0, _componentHelper.escapeRegexChars)(word);
+
+                if (searchNumbers) {
+                  word.split('').forEach(function (char) {
+                    if (/[\d\w]/.test(char)) {
+                      segment = segment.replace(new RegExp("(".concat(char, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
+                    }
+                  });
                 } else {
-                  segment = segment.replace(new RegExp("(".concat(wordCond, ")(").concat(word, ")"), 'gi'), "$1".concat(strS, "$2").concat(strE));
+                  if (wordIndex > inWordIndex) {
+                    segment = segment.replace(new RegExp("(".concat(word, ")"), 'gi'), "".concat(strS, "$1").concat(strE));
+                  } else {
+                    segment = segment.replace(new RegExp("(".concat(wordCond, ")(").concat(word, ")"), 'gi'), "$1".concat(strS, "$2").concat(strE));
+                  }
                 }
               }
             });
@@ -1129,15 +1146,21 @@ var AutocompleteInstance = function (_React$PureComponent2) {
             }
 
             if (isComponent) {
-              if (Array.isArray(component.props.children)) {
-                result = component.props.children.map(function (Comp) {
-                  return Comp === origSegment || Comp.props && Comp.props.children === origSegment ? result : Comp;
+              var _originalChild$props;
+
+              if (Array.isArray(originalChild === null || originalChild === void 0 ? void 0 : (_originalChild$props = originalChild.props) === null || _originalChild$props === void 0 ? void 0 : _originalChild$props.children)) {
+                result = originalChild.props.children.map(function (Comp) {
+                  return Comp === originalChild || Comp.props && Comp.props.children === originalChild ? result : Comp;
                 });
+              } else if (typeof originalChild === 'string') {
+                result = originalChild;
               }
 
-              result = _react.default.cloneElement(component, {
-                key: 'clone' + cacheHash
-              }, result);
+              if (_react.default.isValidElement(originalChild)) {
+                result = _react.default.cloneElement(originalChild, {
+                  key: 'clone' + cacheHash + idx
+                }, result);
+              }
             }
 
             return result;
@@ -1145,31 +1168,42 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           return _this._rC[cacheHash] = children;
         };
 
-        var totalScore = listOfFoundWords.reduce(function (acc, _ref8) {
-          var score = _ref8.score;
-          return acc += score;
-        }, 0);
-
         if (_this.skipFilter || skipFilter) {
           return item.dataItem;
         }
 
+        var totalScore = listOfFoundWords.length;
+
+        var _iterator = _createForOfIteratorHelper(listOfFoundWords),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var wordScore = _step.value.wordScore;
+            totalScore += wordScore;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
         return {
-          countFindings: listOfFoundWords.length + totalScore,
+          totalScore: totalScore,
           item: item
         };
       });
 
       if (!_this.skipFilter && !skipFilter) {
         searchIndex = searchIndex.filter(function (_ref9) {
-          var countFindings = _ref9.countFindings;
-          return countFindings;
+          var totalScore = _ref9.totalScore;
+          return totalScore;
         });
 
         if (!_this.skipReorder && !skipReorder) {
           searchIndex = searchIndex.sort(function (_ref10, _ref11) {
-            var a = _ref10.countFindings;
-            var b = _ref11.countFindings;
+            var a = _ref10.totalScore;
+            var b = _ref11.totalScore;
             return b - a;
           });
         }
@@ -1201,20 +1235,17 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onPreChangeHandler", function (_ref13) {
-      var data = _ref13.data,
-          selected_item = _ref13.selected_item;
+      var data = _ref13.data;
 
       if (data && data.show_all) {
         _this.showAll();
 
-        if (parseFloat(selected_item) > -1) {
-          var active_item = selected_item - 1;
+        var active_item = data.lastActiveItem;
 
-          _this.context.drawerList.setState({
-            active_item: active_item
+        if (parseFloat(active_item) > -1) {
+          _this.context.drawerList.setActiveItemAndScrollToIt(active_item, {
+            scrollTo: false
           });
-
-          _this.scrollToActiveItem(active_item);
         }
 
         return false;
@@ -1231,7 +1262,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         if (!(0, _componentHelper.isTrue)(keep_open)) {
           _this.setState({
             skipFocusDuringChange: true,
-            skipHighlight: true,
+            disableHighlighting: true,
             _listenForPropChanges: false
           });
 
@@ -1243,22 +1274,13 @@ var AutocompleteInstance = function (_React$PureComponent2) {
             });
           } catch (e) {}
 
-          var selectDelay = function selectDelay() {
-            _this.setState({
-              inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, _this.context.drawerList.data),
-              skipFocusDuringChange: false,
-              _listenForPropChanges: false
-            });
-
-            _this.setFocusOnInput();
-          };
-
-          if ((0, _componentHelper.isTrue)(_this.props.no_animation)) {
-            selectDelay();
-          } else {
-            clearTimeout(_this._selectTimeout);
-            _this._selectTimeout = setTimeout(selectDelay, _DrawerListProvider.default.blurDelay);
-          }
+          _this.setState({
+            inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, _this.context.drawerList.data),
+            skipFocusDuringChange: false,
+            _listenForPropChanges: false
+          }, function () {
+            return _this.setFocusOnInput();
+          });
         } else {
           _this.setState({
             inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, _this.context.drawerList.data),
@@ -1645,24 +1667,24 @@ var AutocompleteInstance = function (_React$PureComponent2) {
   }], [{
     key: "parseDataItem",
     value: function parseDataItem(dataItem) {
-      var toParse = (0, _DrawerListHelpers.parseContentTitle)(dataItem, {
+      var searchWord = (0, _DrawerListHelpers.parseContentTitle)(dataItem.search_content || dataItem, {
         separator: ' '
       });
 
-      if (typeof toParse !== 'string' && Array.isArray(toParse)) {
-        return AutocompleteInstance.parseDataItem(toParse);
+      if (typeof searchWord !== 'string' && Array.isArray(searchWord)) {
+        return AutocompleteInstance.parseDataItem(searchWord);
       }
 
-      return toParse;
+      return searchWord;
     }
   }, {
     key: "createSearchIndex",
     value: function createSearchIndex(data) {
       return data.map(function (dataItem) {
-        var searchChunk = AutocompleteInstance.parseDataItem(dataItem);
+        var contentChunk = AutocompleteInstance.parseDataItem(dataItem);
         return {
           dataItem: dataItem,
-          searchChunk: searchChunk
+          contentChunk: contentChunk
         };
       });
     }
@@ -1679,7 +1701,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
       if (state._listenForPropChanges) {
-        state.skipHighlight = (0, _componentHelper.isTrue)(props.disable_highlighting);
+        state.disableHighlighting = (0, _componentHelper.isTrue)(props.disable_highlighting);
 
         if (props.input_value !== 'initval' && typeof state.inputValue === 'undefined' && props.input_value && props.input_value.length > 0) {
           state.inputValue = props.input_value;

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

@@ -62,3 +62,13 @@
 .dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
   font-weight: 600;
   font-weight: var(--font-weight-bold); }
+
+.dnb-autocomplete__root
+.dnb-drawer-list__option--selected
+.dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: #fff;
+  color: var(--color-white); }
+
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: #fff;
+  color: var(--color-white); }

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

@@ -32,12 +32,22 @@
   }
 }
 
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
-  font-weight: var(--font-weight-basis);
+.dnb-autocomplete__root .dnb-drawer-list__option {
+  &__item:nth-of-type(1) {
+    font-weight: var(--font-weight-basis);
+  }
+  &__item:nth-of-type(n + 2) {
+    color: var(--color-black-55);
+  }
+  &__item--highlight {
+    font-weight: var(--font-weight-bold);
+  }
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
-  color: var(--color-black-55);
+.dnb-autocomplete__root
+  .dnb-drawer-list__option--selected
+  .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: var(--color-white);
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
-  font-weight: var(--font-weight-bold);
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: var(--color-white);
 }

package/cjs/components/button/style/themes/_button-mixins.scss

@@ -2,7 +2,7 @@
 * Button mixins
 *
 */
-@mixin buttonHoverStyle($color, $background-color) {
+@mixin buttonHoverStyle($color, $background-color, $border-color) {
   // NB: to get "over" sibling, because of the extendFakeFocus
   // But if we would use it,
   // then then we have to take care of places we use position="absolute", like the Modal Close button
@@ -11,12 +11,17 @@
   color: $color;
   background-color: $background-color;
 
-  @include fakeBorder(var(--color-emerald-green), 0.125rem /*2px*/);
+  @include fakeBorder($border-color, 0.125rem /*2px*/);
 }
 
-@mixin buttonHover($color, $background-color, $enable-touch: null) {
+@mixin buttonHover(
+  $color,
+  $background-color,
+  $border-color: var(--color-emerald-green),
+  $enable-touch: null
+) {
   @include hover() {
-    @include buttonHoverStyle($color, $background-color);
+    @include buttonHoverStyle($color, $background-color, $border-color);
 
     @include IS_IE {
       // by setting opacity to 1, we make sure we don't get the artifact of a cutted border on top and bottom
@@ -29,7 +34,11 @@
   @if $enable-touch == 'touch' {
     html[data-whatintent='touch'] & {
       @include active() {
-        @include buttonHoverStyle($color, $background-color);
+        @include buttonHoverStyle(
+          $color,
+          $background-color,
+          $border-color
+        );
       }
     }
   }

package/cjs/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; }