From 77d2c3b521267b3acaa6076193d16cf345b8c389 Mon Sep 17 00:00:00 2001
From: Elena Stoyanova <elena.stoyanova@sap.com>
Date: Tue, 26 Oct 2021 12:38:13 +0300
Subject: [PATCH 1/5] feat(ui5-input, ui5-combobox, ui5-multicombobox): SAP
 Horizon Theme Implementation

---
 packages/main/src/ComboBox.js                                | 3 ++-
 packages/main/src/ComboBoxPopover.hbs                        | 1 +
 packages/main/src/Input.js                                   | 3 ++-
 packages/main/src/InputPopover.hbs                           | 1 +
 packages/main/src/ListItem.hbs                               | 1 +
 packages/main/src/MultiComboBox.js                           | 3 ++-
 packages/main/src/MultiComboBoxPopover.hbs                   | 2 +-
 packages/main/src/themes/Suggestions.css                     | 3 +++
 packages/main/src/themes/ValueStateMessage.css               | 5 ++---
 .../main/src/themes/base/ValueStateMessage-parameters.css    | 1 +
 .../src/themes/sap_horizon/ValueStateMessage-parameters.css  | 5 +++++
 packages/main/src/themes/sap_horizon/parameters-bundle.css   | 4 ++--
 12 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 packages/main/src/themes/Suggestions.css
 create mode 100644 packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css

diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 79a4633ac2c4..3a26a5fb7d5e 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -39,6 +39,7 @@ import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 import ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
@@ -367,7 +368,7 @@ class ComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss, SuggestionsCss];
 	}
 
 	static get template() {
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
index 0b50e4dfb241..13e240df77fa 100644
--- a/packages/main/src/ComboBoxPopover.hbs
+++ b/packages/main/src/ComboBoxPopover.hbs
@@ -1,4 +1,5 @@
 <ui5-responsive-popover
+	class="ui5-suggestions-popover"
 	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 72375ef81b20..55ed4d35bc85 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -40,6 +40,7 @@ import {
 import styles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 const rgxFloat = new RegExp(/(\+|-)?\d+(\.|,)\d+/);
 
@@ -487,7 +488,7 @@ class Input extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	constructor() {
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index a4678b3b1aad..e18e5676f285 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/packages/main/src/InputPopover.hbs
@@ -1,5 +1,6 @@
 {{#if showSuggestions}}
 	<ui5-responsive-popover
+		class="ui5-suggestions-popover"
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
index cbb38ae6e6fb..fdf2ba0e3a01 100644
--- a/packages/main/src/ListItem.hbs
+++ b/packages/main/src/ListItem.hbs
@@ -1,4 +1,5 @@
 <li
+	part="nativeLi"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 3fc4848ed87c..5c6349454c47 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -49,6 +49,7 @@ import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPop
 import styles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 /**
  * @public
@@ -388,7 +389,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get dependencies() {
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 8f6994e0ee60..0449fc7db578 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Stretch"
-	class="ui5-multi-combobox-all-items-responsive-popover"
+	class="ui5-multi-combobox-all-items-responsive-popover ui5-suggestions-popover"
 	hide-arrow
 	_disable-initial-focus
 	@ui5-selection-change={{_listSelectionChange}}
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
new file mode 100644
index 000000000000..149d2f1f06ae
--- /dev/null
+++ b/packages/main/src/themes/Suggestions.css
@@ -0,0 +1,3 @@
+.ui5-suggestions-popover {
+    background-color: red !important;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
index 2a29d5f26f47..c76eace132c5 100644
--- a/packages/main/src/themes/ValueStateMessage.css
+++ b/packages/main/src/themes/ValueStateMessage.css
@@ -38,8 +38,7 @@ ui5-responsive-popover .ui5-valuestatemessage-header {
 }
 
 .ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
-	outline-width: 0.0625rem;
-	outline-style: dotted;
 	outline-offset: -0.125rem;
-	outline-color: initial;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_value_state_message_focus_border_radius);
 } 
diff --git a/packages/main/src/themes/base/ValueStateMessage-parameters.css b/packages/main/src/themes/base/ValueStateMessage-parameters.css
index 3e7b207570ac..9791531788b7 100644
--- a/packages/main/src/themes/base/ValueStateMessage-parameters.css
+++ b/packages/main/src/themes/base/ValueStateMessage-parameters.css
@@ -1,3 +1,4 @@
 :root {
 	--_ui5_value_state_message_border: none;
+	--_ui5_value_state_message_focus_border_radius: 0;
 }
diff --git a/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css b/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css
new file mode 100644
index 000000000000..21f357a495ef
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/ValueStateMessage-parameters.css";
+
+:root {
+	--_ui5_value_state_message_focus_border_radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index 10cf1f5857a1..416d41c5db74 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -36,6 +36,6 @@
 @import "../base/GrowingButton-parameters.css";
 @import "../base/Title-parameters.css";
 @import "./Token-parameters.css";
-@import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
\ No newline at end of file
+@import "./SliderBase-parameters.css";
+@import "./ValueStateMessage-parameters.css";
\ No newline at end of file

From 96154ec1e8ddbd4bf5d9e30608f83c8ad0325455 Mon Sep 17 00:00:00 2001
From: Elena Stoyanova <elena.stoyanova@sap.com>
Date: Tue, 26 Oct 2021 15:11:29 +0300
Subject: [PATCH 2/5] additional styles

---
 packages/base/hash.txt                                |  2 +-
 packages/main/src/ComboBox.js                         |  4 ++++
 packages/main/src/ComboBoxPopover.hbs                 |  2 +-
 packages/main/src/GroupHeaderListItem.hbs             |  1 +
 packages/main/src/Input.js                            |  4 ++++
 packages/main/src/InputPopover.hbs                    |  2 +-
 packages/main/src/ListItem.hbs                        |  2 +-
 packages/main/src/MultiComboBox.js                    |  5 +++++
 packages/main/src/MultiComboBoxPopover.hbs            |  2 +-
 packages/main/src/features/InputSuggestions.js        |  4 ++++
 packages/main/src/themes/Suggestions.css              | 11 +++++++++--
 .../main/src/themes/base/Suggestions-parameters.css   |  4 ++++
 .../main/src/themes/sap_belize/parameters-bundle.css  |  3 ++-
 .../src/themes/sap_belize_hcb/parameters-bundle.css   |  1 +
 .../src/themes/sap_belize_hcw/parameters-bundle.css   |  3 ++-
 .../main/src/themes/sap_fiori_3/parameters-bundle.css |  3 ++-
 .../src/themes/sap_fiori_3_dark/parameters-bundle.css |  1 +
 .../src/themes/sap_fiori_3_hcb/parameters-bundle.css  |  3 ++-
 .../src/themes/sap_fiori_3_hcw/parameters-bundle.css  |  3 ++-
 .../src/themes/sap_horizon/Suggestions-parameters.css |  6 ++++++
 .../main/src/themes/sap_horizon/parameters-bundle.css |  3 ++-
 21 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 packages/main/src/themes/base/Suggestions-parameters.css
 create mode 100644 packages/main/src/themes/sap_horizon/Suggestions-parameters.css

diff --git a/packages/base/hash.txt b/packages/base/hash.txt
index 299d1455c90c..540e1e5c36c2 100644
--- a/packages/base/hash.txt
+++ b/packages/base/hash.txt
@@ -1 +1 @@
-NaS6y8wA0e7VTQNYOV0o6eBd+fU=
\ No newline at end of file
+muNDusU5HaMiYUI9h1W3xsW8DEk=
\ No newline at end of file
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 3a26a5fb7d5e..63ff39ce0238 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -995,6 +995,10 @@ class ComboBox extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-header": true,
 				"ui5-valuestatemessage-root": true,
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
index 13e240df77fa..79928bf0d660 100644
--- a/packages/main/src/ComboBoxPopover.hbs
+++ b/packages/main/src/ComboBoxPopover.hbs
@@ -1,5 +1,5 @@
 <ui5-responsive-popover
-	class="ui5-suggestions-popover"
+	class="{{classes.popover}}"
 	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
diff --git a/packages/main/src/GroupHeaderListItem.hbs b/packages/main/src/GroupHeaderListItem.hbs
index 6569f47661d7..ab136b4a8d40 100644
--- a/packages/main/src/GroupHeaderListItem.hbs
+++ b/packages/main/src/GroupHeaderListItem.hbs
@@ -1,4 +1,5 @@
 <li
+	part="native-li"
 	tabindex="{{_tabIndex}}"
 	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{_onfocusin}}"
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 55ed4d35bc85..302ed95ebd84 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -1155,6 +1155,10 @@ class Input extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone && this.showSuggestions,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.showSuggestions && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index e18e5676f285..719d0b0bc269 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/packages/main/src/InputPopover.hbs
@@ -1,6 +1,6 @@
 {{#if showSuggestions}}
 	<ui5-responsive-popover
-		class="ui5-suggestions-popover"
+		class="{{classes.popover}}"
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
index fdf2ba0e3a01..20983bf8f755 100644
--- a/packages/main/src/ListItem.hbs
+++ b/packages/main/src/ListItem.hbs
@@ -1,5 +1,5 @@
 <li
-	part="nativeLi"
+	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 5c6349454c47..a77bae39bf52 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -1034,6 +1034,11 @@ class MultiComboBox extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-multi-combobox-all-items-responsive-popover": true,
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 0449fc7db578..6e00fbbc2456 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Stretch"
-	class="ui5-multi-combobox-all-items-responsive-popover ui5-suggestions-popover"
+	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
 	@ui5-selection-change={{_listSelectionChange}}
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
index b4ae85994379..e48843f997e1 100644
--- a/packages/main/src/features/InputSuggestions.js
+++ b/packages/main/src/features/InputSuggestions.js
@@ -181,6 +181,7 @@ class Suggestions {
 
 		this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
 		item.selected = false;
+		item.focused = false;
 		this._getComponent().open = false;
 	}
 
@@ -296,10 +297,12 @@ class Suggestions {
 
 		if (previousItem) {
 			previousItem.selected = false;
+			previousItem.focused = false;
 		}
 
 		if (currentItem) {
 			currentItem.selected = true;
+			currentItem.focused = true;
 
 			if (this.handleFocus) {
 				currentItem.focus();
@@ -317,6 +320,7 @@ class Suggestions {
 		const items = this._getItems();
 		items.forEach(item => {
 			item.selected = false;
+			item.focused = false;
 		});
 	}
 
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
index 149d2f1f06ae..fecd9b09bc82 100644
--- a/packages/main/src/themes/Suggestions.css
+++ b/packages/main/src/themes/Suggestions.css
@@ -1,3 +1,10 @@
-.ui5-suggestions-popover {
-    background-color: red !important;
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li][focused]:first-child::part(native-li)::after,
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-groupheader][focused]:first-child::part(native-li)::after,
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-suggestion-item][focused]:first-child::part(native-li)::after {
+	border-radius: var(--_ui5_suggestions_first_item_focus_border_radius);
+}
+
+.ui5-suggestions-popover [ui5-li][focused]:last-child::part(native-li)::after,
+.ui5-suggestions-popover [ui5-li-suggestion-item][focused]:last-child::part(native-li)::after {
+	border-radius: var(--_ui5_suggestions_last_item_focus_border_radius);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Suggestions-parameters.css b/packages/main/src/themes/base/Suggestions-parameters.css
new file mode 100644
index 000000000000..a2f3b455ca1b
--- /dev/null
+++ b/packages/main/src/themes/base/Suggestions-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--_ui5_suggestions_first_item_focus_border_radius: 0;
+	--_ui5_suggestions_last_item_focus_border_radius: 0;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
index 27d1fb1f52c9..24e74b4f3c68 100644
--- a/packages/main/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -38,4 +38,5 @@
 @import "../base/Token-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
\ No newline at end of file
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index 20f4f66b2a89..d8fd2335d43f 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -38,3 +38,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index 2fffeed6d448..40008e8093ab 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -37,4 +37,5 @@
 @import "./Token-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
\ No newline at end of file
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index 10cf1f5857a1..fc97814c8e5b 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -38,4 +38,5 @@
 @import "./Token-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
\ No newline at end of file
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index bd19bdc5b641..2751e21ac31b 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -38,3 +38,4 @@
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 6418971e7a83..b572c2a19937 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -38,4 +38,5 @@
 @import "./Token-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
\ No newline at end of file
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 6418971e7a83..b572c2a19937 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -38,4 +38,5 @@
 @import "./Token-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
\ No newline at end of file
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/Suggestions-parameters.css b/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
new file mode 100644
index 000000000000..3c6c5456ffca
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/Suggestions-parameters.css";
+
+:root {
+	--_ui5_suggestions_first_item_focus_border_radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+	--_ui5_suggestions_last_item_focus_border_radius: 0 0 var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius);
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index 416d41c5db74..8e007d586889 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -38,4 +38,5 @@
 @import "./Token-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "./ValueStateMessage-parameters.css";
\ No newline at end of file
+@import "./ValueStateMessage-parameters.css";
+@import "./Suggestions-parameters.css";
\ No newline at end of file

From 7a52f8504e582237e7e65b6009bcb725a3f0567c Mon Sep 17 00:00:00 2001
From: Elena Stoyanova <elena.stoyanova@sap.com>
Date: Tue, 26 Oct 2021 15:15:10 +0300
Subject: [PATCH 3/5] remove hash update

---
 packages/base/hash.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base/hash.txt b/packages/base/hash.txt
index 540e1e5c36c2..299d1455c90c 100644
--- a/packages/base/hash.txt
+++ b/packages/base/hash.txt
@@ -1 +1 @@
-muNDusU5HaMiYUI9h1W3xsW8DEk=
\ No newline at end of file
+NaS6y8wA0e7VTQNYOV0o6eBd+fU=
\ No newline at end of file

From 4a5532b0697a916ee49321d1d4f67bcc6fab9250 Mon Sep 17 00:00:00 2001
From: Elena Stoyanova <elena.stoyanova@sap.com>
Date: Tue, 26 Oct 2021 15:55:14 +0300
Subject: [PATCH 4/5] add nmore logic

---
 packages/main/src/Tokenizer.js           | 5 ++++-
 packages/main/src/themes/Suggestions.css | 6 ++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
index 6116b73b8f4a..03f52c1e1bc2 100644
--- a/packages/main/src/Tokenizer.js
+++ b/packages/main/src/Tokenizer.js
@@ -27,6 +27,9 @@ import styles from "./generated/themes/Tokenizer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
+// reuse suggestions focus styling for NMore popup
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+
 /**
  * @public
  */
@@ -125,7 +128,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get staticAreaTemplate() {
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
index fecd9b09bc82..fd8903efc1bc 100644
--- a/packages/main/src/themes/Suggestions.css
+++ b/packages/main/src/themes/Suggestions.css
@@ -1,10 +1,12 @@
 .ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li][focused]:first-child::part(native-li)::after,
 .ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-groupheader][focused]:first-child::part(native-li)::after,
-.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-suggestion-item][focused]:first-child::part(native-li)::after {
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-suggestion-item][focused]:first-child::part(native-li)::after,
+.ui5-tokenizer-list [ui5-li][focused]:first-child::part(native-li)::after {
 	border-radius: var(--_ui5_suggestions_first_item_focus_border_radius);
 }
 
 .ui5-suggestions-popover [ui5-li][focused]:last-child::part(native-li)::after,
-.ui5-suggestions-popover [ui5-li-suggestion-item][focused]:last-child::part(native-li)::after {
+.ui5-suggestions-popover [ui5-li-suggestion-item][focused]:last-child::part(native-li)::after,
+.ui5-tokenizer-list [ui5-li][focused]:last-child::part(native-li)::after {
 	border-radius: var(--_ui5_suggestions_last_item_focus_border_radius);
 }
\ No newline at end of file

From 2e19c69eb16a560ae463f633677d3014e1ee50a2 Mon Sep 17 00:00:00 2001
From: Elena Stoyanova <elena.stoyanova@sap.com>
Date: Wed, 27 Oct 2021 09:40:00 +0300
Subject: [PATCH 5/5] additional styles

---
 packages/main/src/themes/Suggestions.css                    | 6 ++++--
 packages/main/src/themes/base/Suggestions-parameters.css    | 3 +--
 .../main/src/themes/sap_horizon/Suggestions-parameters.css  | 3 +--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
index fd8903efc1bc..96b48d888408 100644
--- a/packages/main/src/themes/Suggestions.css
+++ b/packages/main/src/themes/Suggestions.css
@@ -2,11 +2,13 @@
 .ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-groupheader][focused]:first-child::part(native-li)::after,
 .ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-suggestion-item][focused]:first-child::part(native-li)::after,
 .ui5-tokenizer-list [ui5-li][focused]:first-child::part(native-li)::after {
-	border-radius: var(--_ui5_suggestions_first_item_focus_border_radius);
+	border-top-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
+	border-top-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
 }
 
 .ui5-suggestions-popover [ui5-li][focused]:last-child::part(native-li)::after,
 .ui5-suggestions-popover [ui5-li-suggestion-item][focused]:last-child::part(native-li)::after,
 .ui5-tokenizer-list [ui5-li][focused]:last-child::part(native-li)::after {
-	border-radius: var(--_ui5_suggestions_last_item_focus_border_radius);
+	border-bottom-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
+	border-bottom-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Suggestions-parameters.css b/packages/main/src/themes/base/Suggestions-parameters.css
index a2f3b455ca1b..b69aba429141 100644
--- a/packages/main/src/themes/base/Suggestions-parameters.css
+++ b/packages/main/src/themes/base/Suggestions-parameters.css
@@ -1,4 +1,3 @@
 :root {
-	--_ui5_suggestions_first_item_focus_border_radius: 0;
-	--_ui5_suggestions_last_item_focus_border_radius: 0;
+	--_ui5_suggestions_item_focus_border_radius: 0;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/Suggestions-parameters.css b/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
index 3c6c5456ffca..e4bc4879e29a 100644
--- a/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
+++ b/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/Suggestions-parameters.css";
 
 :root {
-	--_ui5_suggestions_first_item_focus_border_radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
-	--_ui5_suggestions_last_item_focus_border_radius: 0 0 var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius);
+	--_ui5_suggestions_item_focus_border_radius: var(--sapElement_BorderCornerRadius);
 }
\ No newline at end of file