@dnb/eufemia 9.12.1 → 9.13.0

package/components/autocomplete/Autocomplete.js

@@ -3,6 +3,14 @@ import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -17,8 +25,16 @@ var _IconPrimary, _AlignmentHelper;
 
 var _excluded = ["fillDataIfEmpty"],
     _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
+
+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; }
+
 import "core-js/modules/es.string.trim.js";
 import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.regexp.exec.js";
@@ -27,9 +43,9 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.regexp.constructor.js";
 import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.match.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.string.includes.js";
-import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.array.sort.js";
 import "core-js/modules/es.array.concat.js";
 
@@ -58,7 +74,7 @@ import ProgressIndicator from '../progress-indicator/ProgressIndicator';
 import DrawerList from '../../fragments/drawer-list/DrawerList';
 import DrawerListContext from '../../fragments/drawer-list/DrawerListContext';
 import DrawerListProvider from '../../fragments/drawer-list/DrawerListProvider';
-import { parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
+import { drawerListPropTypes, parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
 
 var Autocomplete = function (_React$PureComponent) {
   _inherits(Autocomplete, _React$PureComponent);
@@ -171,7 +187,7 @@ _defineProperty(Autocomplete, "defaultProps", {
 });
 
 export { Autocomplete as default };
-process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_objectSpread({
+process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_objectSpread(_objectSpread({}, spacingPropTypes), drawerListPropTypes), {}, {
   id: PropTypes.string,
   mode: PropTypes.oneOf(['sync', 'async']),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -233,8 +249,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   portal_class: PropTypes.string,
-  drawer_class: PropTypes.string
-}, spacingPropTypes), {}, {
+  drawer_class: PropTypes.string,
   class: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
@@ -305,18 +320,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;
@@ -395,7 +398,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       value = String(value || '').trim();
 
       _this.setState({
-        skipHighlight: false,
+        disableHighlighting: false,
         _listenForPropChanges: false
       });
 
@@ -417,24 +420,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.createElement(React.Fragment, null, _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
-            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.createElement(React.Fragment, null, _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
+              icon: "arrow_down"
+            })), _this._props.show_all)
+          });
+        }
       }
 
       return data;
@@ -854,7 +861,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 () {
@@ -869,9 +878,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         _listenForPropChanges: false
       });
 
-      _this.context.drawerList.setState({
-        selected_item: null
-      });
+      _this.resetSelections();
     });
 
     _defineProperty(_assertThisInitialized(_this), "resetSelections", function () {
@@ -894,8 +901,8 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           searchNumbers = _ref5$searchNumbers === void 0 ? 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,
@@ -913,16 +920,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 {
@@ -935,28 +949,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(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(escapeRegexChars(word)), 'ig')) || []).length;
+
+          if (wordIndex === 0) {
+            var isFirstWord = new RegExp("^".concat(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
           };
         });
       };
@@ -965,8 +984,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 = {
@@ -979,6 +998,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 || {};
 
@@ -988,41 +1013,37 @@ var AutocompleteInstance = function (_React$PureComponent2) {
 
           var isComponent = typeof children !== 'string' && React.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: convertJsxToString(component)
+              originalChild: originalChild,
+              segment: 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 = 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 = 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));
+                  }
                 }
               }
             });
@@ -1042,15 +1063,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.cloneElement(component, {
-                key: 'clone' + cacheHash
-              }, result);
+              if (React.isValidElement(originalChild)) {
+                result = React.cloneElement(originalChild, {
+                  key: 'clone' + cacheHash + idx
+                }, result);
+              }
             }
 
             return result;
@@ -1058,31 +1085,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;
           });
         }
@@ -1114,20 +1152,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;
@@ -1144,7 +1179,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         if (!isTrue(keep_open)) {
           _this.setState({
             skipFocusDuringChange: true,
-            skipHighlight: true,
+            disableHighlighting: true,
             _listenForPropChanges: false
           });
 
@@ -1156,22 +1191,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 (isTrue(_this.props.no_animation)) {
-            selectDelay();
-          } else {
-            clearTimeout(_this._selectTimeout);
-            _this._selectTimeout = setTimeout(selectDelay, DrawerListProvider.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),
@@ -1558,24 +1584,24 @@ var AutocompleteInstance = function (_React$PureComponent2) {
   }], [{
     key: "parseDataItem",
     value: function parseDataItem(dataItem) {
-      var toParse = parseContentTitle(dataItem, {
+      var searchWord = 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
         };
       });
     }
@@ -1592,7 +1618,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
       if (state._listenForPropChanges) {
-        state.skipHighlight = isTrue(props.disable_highlighting);
+        state.disableHighlighting = 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/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/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/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/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; }