@ui5/webcomponents 0.0.0-b6f02e4b3 → 0.0.0-b93bc8b37

package/src/themes/Input.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
 
@@ -7,7 +8,8 @@
 
 :host {
 	width: var(--_ui5_input_width);
-	min-width: var(--_ui5_input_width);
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+	margin: var(--_ui5_input_margin_top_bottom) 0;
 	height: var(--_ui5_input_height);
 	color: var(--sapField_TextColor);
 	font-size: var(--sapFontSize);
@@ -16,16 +18,16 @@
 	border: var(--_ui5-input-border);
 	border-radius: var(--_ui5_input_border_radius);
 	box-sizing: border-box;
-	line-height: normal;
-	letter-spacing: normal;
-	word-spacing: normal;
 	text-align: start;
 	transition: var(--_ui5_input_transition);
+}
+
+:host(:not([disabled])) {
 	background: var(--sapField_BackgroundStyle);
 	background-color: var(--_ui5_input_background_color);
 }
 
-:host([focused]) {
+:host([focused]:not([opened])) {
 	border-color: var(--_ui5_input_focused_border_color);
 	background-color: var(--sapField_Focus_Background);
 }
@@ -34,7 +36,7 @@
 	position: relative;
 }
 
-:host([focused]) .ui5-input-focusable-element::after {
+:host([focused]:not([opened])) .ui5-input-focusable-element::after {
 	content: var(--ui5_input_focus_pseudo_element_content);
 	position: absolute;
 	pointer-events: none;
@@ -96,7 +98,7 @@
 	-moz-appearance: textfield;
 	padding: var(--_ui5_input_inner_padding);
 	box-sizing: border-box;
-	min-width: inherit;
+	min-width: var(--_ui5_input_min_width);
 	width: 100%;
 	text-align: inherit;
 	text-overflow: ellipsis;
@@ -146,14 +148,6 @@
 	visibility: hidden;
 }
 
-:host([disabled]) [inner-input]:-ms-input-placeholder {
-	visibility: hidden;
-}
-
-:host([readonly]) [inner-input]:-ms-input-placeholder {
-	visibility: hidden;
-}
-
 [inner-input]::-webkit-input-placeholder {
 	font-weight: normal;
 	font-style: var(--_ui5_input_placeholder_style);
@@ -168,37 +162,38 @@
 	padding-right: 0.125rem;
 }
 
-[inner-input]:-ms-input-placeholder {
-	font-weight: normal;
-	font-style: italic;
-	color: var(--_ui5_input_placeholder_color);
-	padding-right: 0.125rem;
-}
-
 :host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
 	color: var(--_ui5-input_error_placeholder_color);
-	font-weight: var(--_ui5_input_value_state_error_placeholder_font_weight);
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
 :host([value-state="Error"]) [inner-input]::-moz-placeholder {
 	color: var(--_ui5-input_error_placeholder_color);
-	font-weight: var(--_ui5_input_value_state_error_placeholder_font_weight);
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
+}
+
+:host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder {
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
+}
+
+:host([value-state="Warning"]) [inner-input]::-moz-placeholder {
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
 :host([value-state="Success"]) [inner-input]::-webkit-input-placeholder {
-	color: var(--_ui5_input_value_state_success_border_botom_color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 :host([value-state="Success"]) [inner-input]::-moz-placeholder {
-	color: var(--_ui5_input_value_state_success_border_botom_color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 :host([value-state="Information"]) [inner-input]::-webkit-input-placeholder {
-	color: var(--_ui5_input_value_success_information_border_botom_color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 :host([value-state="Information"]) [inner-input]::-moz-placeholder {
-	color:var(--_ui5_input_value_success_information_border_botom_color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 .ui5-input-content {
@@ -228,16 +223,16 @@
 	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
 }
-:host(:not([value-state]):not([readonly])[focused]:hover),
-:host([value-state="None"]:not([readonly])[focused]:hover) {
+:host(:not([value-state]):not([readonly])[focused]:not([opened]):hover),
+:host([value-state="None"]:not([readonly])[focused]:not([opened]):hover) {
 	box-shadow: none;
 }
 
-:host([focused]) .ui5-input-root::before {
+:host([focused]):not([opened]) .ui5-input-root::before {
 	content: none;
 }
 
-:host([value-state]:not([value-state="None"])) {
+:host(:not([readonly]):not([disabled])[value-state]:not([value-state="None"])) {
 	border-width: var(--_ui5_input_state_border_width);
 }
 
@@ -255,18 +250,18 @@
 	font-weight: var(--_ui5_input_warning_font_weight);
 }
 
-:host([value-state="Error"]:not([readonly])) {
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
 	background: var(--sapField_InvalidBackgroundStyle);
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--_ui5_input_value_state_error_border_color);
 }
 
-:host([value-state="Error"][focused]:not([readonly])) {
+:host([value-state="Error"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_error_background);
 	border-color: var(--_ui5_input_focused_value_state_error_border_color);
 }
 
-:host([value-state="Error"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Error"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
 	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
 }
 
@@ -274,7 +269,8 @@
 	background-color: var(--_ui5-input-value-state-error-border-botom-color);
 }
 
-:host([value-state="Error"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Error"]:not([readonly]):not([focused]):hover),
+:host([value-state="Error"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--_ui5_input_value_state_error_hover_background);
 	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
 }
@@ -285,18 +281,18 @@
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Warning"]:not([readonly])) {
+:host([value-state="Warning"]:not([readonly]):not([disabled])) {
 	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapField_WarningBackground);
 	border-color: var(--_ui5_input_value_state_warning_border_color);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) {
+:host([value-state="Warning"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_warning_background);
 	border-color: var(--_ui5_input_focused_value_state_warning_border_color);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Warning"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
 	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
 }
 
@@ -304,24 +300,25 @@
 	background-color: var(--_ui5_input_value_state_warning_border_botom_color);
 }
 
-:host([value-state="Warning"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Warning"]:not([readonly]):not([focused]):hover),
+:host([value-state="Warning"]:not([readonly])[focused][opened]:hover)  {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
 }
 
-:host([value-state="Success"]:not([readonly])) {
+:host([value-state="Success"]:not([readonly]):not([disabled])) {
 	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--_ui5_input_value_state_success_border_color);
 	border-width: var(--_ui5_input_value_state_success_border_width);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) {
+:host([value-state="Success"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_success_background);
 	border-color: var(--_ui5_input_focused_value_state_success_border_color);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Success"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
 	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
 }
 
@@ -329,7 +326,8 @@
 	background-color: var(--_ui5_input_value_state_success_border_botom_color);
 }
 
-:host([value-state="Success"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Success"]:not([readonly]):not([focused]):hover),
+:host([value-state="Success"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
 }
@@ -341,7 +339,7 @@
 	border-width: var(--_ui5_input_information_border_width);
 }
 
-:host([value-state="Information"][focused]:not([readonly])) {
+:host([value-state="Information"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_information_background);
 	border-color: var(--_ui5_input_focused_value_state_information_border_color);
 }
@@ -350,17 +348,12 @@
 	background-color: var(--_ui5_input_value_success_information_border_botom_color);
 }
 
-:host([value-state="Information"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Information"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
 }
 
-/* Remove IE's defaut clear button */
-[inner-input]::-ms-clear {
-	height: 0;
-	width: 0;
-}
-
 /* Input Icon */
 
 .ui5-input-icon-root {
@@ -439,12 +432,34 @@
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 
+.ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_height);
+	padding: 0;
+	width: var(--_ui5_input_icon_width);
+	min-width: var(--_ui5_input_icon_width);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+:host([value-state]:not([value-state="None"]):not([value-state="Success"])) .ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_state_height);
+	vertical-align: top;
+}
 
+:host([value-state="Success"]) .ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_success_state_height);
+}
 
+[ui5-icon].ui5-input-clear-icon {
+	padding: 0;
+	color: inherit;
+}
 
 /* Chrome, Safari, Edge, Opera */
 [inner-input]::-webkit-outer-spin-button,
 [inner-input]::-webkit-inner-spin-button {
-  -webkit-appearance: inherit;
-  margin: inherit;
+	-webkit-appearance: inherit;
+	margin: inherit;
 }

package/src/themes/Label.css

@@ -56,7 +56,7 @@ bdi {
 }
 
 :host([show-colon]) .ui5-label-required-colon {
-	margin-left: -0.05rem; /*0.8px - fix for last letter clipping issue when style is italic*/
+	margin-inline-start: -0.05rem; /*0.8px - fix for last letter clipping issue when style is italic*/
 }
 
 :host([show-colon]) .ui5-label-required-colon:before {

package/src/themes/Link.css

@@ -13,6 +13,8 @@
 	outline: none;
 	text-decoration: var(--_ui5_link_text_decoration);
 	text-shadow: var(--sapContent_TextShadow);
+	white-space: nowrap;
+	overflow-wrap: normal;
 }
 
 :host([disabled]) {
@@ -40,21 +42,22 @@
 	color: var(--sapLinkColor);
 }
 
-:host([wrapping-type="Normal"]) .ui5-link-root {
+:host([wrapping-type="Normal"]) {
 	white-space: normal;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 .ui5-link-root {
 	width: 100%;
 	display: inline-block;
 	position: relative;
-	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	word-wrap: normal;
 	outline: none;
+	white-space: inherit;
+	overflow-wrap: inherit;
 	text-decoration: inherit;
+	color: inherit;
 }
 
 :host(:active) .ui5-link-root {
@@ -62,10 +65,6 @@
 	text-decoration: var(--_ui5_link_active_text_decoration);
 }
 
-.ui5-link-root:visited {
-	color: var(--sapLink_Visited_Color);
-}
-
 :host .ui5-link-root {
 	border: var(--_ui5_link_border);
 	border-radius: var(--_ui5_link_focus_border-radius);
@@ -81,14 +80,20 @@
 	text-shadow: none;
 }
 
-:host(:hover),
-:host(:hover) .ui5-link-root {
+:host(:hover) {
 	color: var(--sapLink_Hover_Color);
 	text-decoration: var(--_ui5_link_hover_text_decoration);
 }
 
-:host([focused]:hover),
+:host([design="Subtle"]:hover) {
+	color: var(--sapLink_SubtleColor);
+	text-decoration: var(--_ui5_link_subtle_text_decoration_hover);
+}
+
+:host([focused]:hover) {
+	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}
+
 :host([focused]:hover) .ui5-link-root {
 	color: var(--_ui5_link_focused_hover_text_color);
-	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

package/src/themes/ListItem.css

@@ -27,6 +27,16 @@
 	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
+/* navigated */
+:host([navigated]) .ui5-li-root .ui5-li-navigated {
+	width: 0.1875rem;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: var(--sapList_SelectionBorderColor);
+}
+
 /* active */
 :host([active][actionable]) .ui5-li-root .ui5-li-icon {
 	color: var(--sapList_Active_TextColor);
@@ -65,6 +75,10 @@
 	height: 5rem;
 }
 
+:host([_has-image-content]) {
+	height: 5rem;
+}
+
 :host([image]) .ui5-li-content {
 	height: 3rem;
 }
@@ -106,13 +120,21 @@
 }
 
 .ui5-li-additional-text,
-.ui5-li-title,
+:host(:not([wrapping-type="Normal"])) .ui5-li-title,
 .ui5-li-desc {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
+:host([wrapping-type="Normal"]) {
+	height: auto;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-content {
+	margin: var(--_ui5_list_item_content_vertical_offset) 0;
+}
+
 .ui5-li-desc {
 	color: var(--sapContent_LabelColor);
 	font-size: var(--sapFontSize);
@@ -133,13 +155,17 @@
 
 .ui5-li-img {
 	width: var(--_ui5_list_item_img_size);
-	min-width: var(--_ui5_list_item_img_size);
 	height: var(--_ui5_list_item_img_size);
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
+.ui5-li-img,
+.ui5-li-imgContent {
+	min-width: var(--_ui5_list_item_img_size);
 	min-height: var(--_ui5_list_item_img_size);
 	margin-top: var(--_ui5_list_item_img_top_margin);
 	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
 	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
-	border-radius: 0.25rem;
 }
 
 .ui5-li-img-inner {
@@ -157,10 +183,7 @@
 	display: flex;
 	align-items: center;
 	flex: auto;
-	white-space: nowrap;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	pointer-events: none; /* IE specific */
 }
 
 .ui5-li-detailbtn,
@@ -199,4 +222,4 @@
 
 :host [ui5-checkbox].ui5-li-singlesel-radiobtn {
 	margin-right: var(--_ui5_list_item_cb_margin_right);
-}
+}

package/src/themes/ListItemBase.css

@@ -79,8 +79,6 @@
 
 .ui5-li-content {
 	max-width: 100%;
-	min-height: 1px; /* IE specific: fixes vertical centering with flex  */
 	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapList_TextColor);
-	pointer-events: none;  /* IE specific: fixes focus crrectly applied*/
 }

package/src/themes/Menu.css

@@ -15,7 +15,9 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding-inline-start: 0.5rem;
-	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning as float and inline-block are incompatible */
+	pointer-events: none;
+	position: absolute;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
 }
 
 .ui5-menu-item-no-icon-end {
@@ -24,7 +26,12 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding-inline-start: 0.5rem;
-	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning a float and inline-block are incompatible */
+	pointer-events: none;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
+}
+
+.ui5-menu-item[additional-text] .ui5-menu-item-no-icon-end {
+	display: none;
 }
 
 .ui5-menu-item-dummy-icon {
@@ -33,6 +40,11 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding-inline-end: 0.5rem;
+	pointer-events: none;
+}
+
+.ui5-menu-busy-indicator {
+	width: 100%;
 }
 
 .ui5-menu-dialog-header {
@@ -66,6 +78,16 @@
 	margin-right: 1rem;
 }
 
+.ui5-menu-item::part(title) {
+    font-size: var(--sapFontSize);
+	padding-top: 0.125rem;
+}
+
+.ui5-menu-item[icon]:not([is-phone])::part(title),
+.ui5-menu-item[is-phone]:not([icon=""])::part(title) {
+	padding-top: 0;
+}
+
 .ui5-menu-item:not([is-phone])::part(native-li) {
 	padding: var(--_ui5_menu_item_padding);
 }
@@ -85,4 +107,15 @@
 .ui5-menu-rp[sub-menu] {
 	margin-top: 0.25rem;
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
+}
+
+.ui5-menu-rp[sub-menu][actual-placement-type="Left"] {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
+}
+
+.ui5-menu-item::part(additional-text) {
+	margin-inline-start: var(--_ui5_menu_item_additional_text_start_margin);
+	color: var(--sapContent_LabelColor);
+	min-width: max-content;
 }

package/src/themes/MonthPicker.css

@@ -19,6 +19,7 @@
 
 .ui5-mp-item {
 	display: flex;
+	flex-direction: column;
 	width: calc(33.333% - 0.125rem);
 	height: var(--_ui5_month_picker_item_height);
 	color: var(--sapButton_Lite_TextColor);
@@ -29,7 +30,6 @@
 	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	cursor: default;
 	outline: none;
@@ -38,11 +38,17 @@
 	border-radius: var(--_ui5_monthpicker_item_border_radius);
 }
 
+.ui5-dp-monthsectext {
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
 .ui5-mp-item:hover {
 	background-color: var(--sapList_Hover_Background);
 }
 
-.ui5-mp-item.ui5-mp-item--selected {
+.ui5-mp-item.ui5-mp-item--selected,
+.ui5-mp-item.ui5-mp-item--selected .ui5-dp-monthsectext {
 	box-shadow: var(--_ui5_monthpicker_item_selected_box_shadow);
 	font-weight: var(--_ui5_monthpicker_item_selected_font_wieght);
 	background-color: var(--_ui5_monthpicker_item_selected_background_color);
@@ -59,7 +65,7 @@
 }
 
 .ui5-mp-item.ui5-mp-item--selected:focus::after {
-	border-color: var(--sapContent_ContrastFocusColor);
+	border-color: var(--_ui5_monthpicker_item_focus_after_border);
 }
 
 .ui5-mp-item.ui5-mp-item--selected:hover {

package/src/themes/MultiComboBox.css

@@ -1,7 +1,16 @@
+@import "./FormComponents.css";
 @import "./Input.css";
 @import "./InputIcon.css";
 @import "./InvisibleTextStyles.css";
 
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
 :host(:not([hidden])) {
 	display: inline-block;
 }
@@ -15,27 +24,30 @@
 }
 
 .ui5-multi-combobox-tokenizer {
-	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
-	min-width: 0px;
 	height: 100%;
 }
 
-/* Workaround for IE */
-[ui5-multi-combobox] {
-	width: 100%;
+:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
 }
 
-[ui5-multi-combobox] [ui5-tokenizer] {
-	flex: 3;
+.ui5-multi-combobox-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
 }
 
-[ui5-icon] {
-	border-top-right-radius: var(--ui5-multi_bombobox_icon_border_top_right_radius);
-    border-bottom-right-radius: var(--ui5-multi_bombobox_icon_border_bottom_right_radius);
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
 }
 
-:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
-	color: var(--sapLinkColor);
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
 }

package/src/themes/MultiComboBoxPopover.css

@@ -0,0 +1,3 @@
+.ui5-suggestions-popover .ui5-multi-combobox-all-items-list {
+	--_ui5_checkbox_width_height: var(--_ui5_list_item_dropdown_base_height);
+}

package/src/themes/MultiInput.css

@@ -1,18 +1,38 @@
 @import "./InputIcon.css";
 
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
 .ui5-multi-input-tokenizer {
-	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
-	min-width: 0px;
 	height: 100%;
 }
 
-/* Workaround for IE */
-[ui5-multi-input] [ui5-tokenizer] {
-	flex: 3;
-}
-
 :host([readonly]) .ui5-multi-input-tokenizer::part(n-more-text) {
 	color: var(--sapLinkColor);
-}
+}
+
+.ui5-multi-input-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
+}