@ui5/webcomponents 0.0.0-df5b4199a → 0.0.0-e03cd01f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-df5b4199a",
+  "version": "0.0.0-e03cd01f3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,22 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-df5b4199a",
-    "@ui5/webcomponents-icons": "0.0.0-df5b4199a",
-    "@ui5/webcomponents-icons-business-suite": "0.0.0-df5b4199a",
-    "@ui5/webcomponents-icons-tnt": "0.0.0-df5b4199a",
-    "@ui5/webcomponents-localization": "0.0.0-df5b4199a",
-    "@ui5/webcomponents-theming": "0.0.0-df5b4199a"
+    "@ui5/webcomponents-base": "0.0.0-e03cd01f3",
+    "@ui5/webcomponents-icons": "0.0.0-e03cd01f3",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-e03cd01f3",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-e03cd01f3",
+    "@ui5/webcomponents-localization": "0.0.0-e03cd01f3",
+    "@ui5/webcomponents-theming": "0.0.0-e03cd01f3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "0.0.0-df5b4199a",
+    "@ui5/webcomponents-tools": "0.0.0-e03cd01f3",
     "cypress": "^15.3.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "c07b41622cd8f0a2094b38233f6ad89f6cb4ee2b"
+  "gitHead": "f28ab61f9c4395563d4664b411455d7c28f47597"
 }

package/src/BreadcrumbsTemplate.tsx

@@ -52,7 +52,6 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
 					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
 						<span
 							id={`${this._id}-labelWrapper`}
-							role="link"
 							aria-current="page"
 							aria-label={this._currentLocationAccName}
 						>

package/src/CalendarHeaderTemplate.tsx

@@ -16,6 +16,11 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onPrevButtonClick}
+				tabindex={this._previousButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipPrevButton}
+				aria-label={this.accInfo.ariaLabelPrevButton}
+				aria-description={this.accInfo.ariaLabelPrevButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
 			</div>
@@ -93,6 +98,11 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
+				tabindex={this._nextButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipNextButton}
+				aria-label={this.accInfo.ariaLabelNextButton}
+				aria-description={this.accInfo.ariaLabelNextButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutNextButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>

package/src/CalendarTemplate.tsx

@@ -13,6 +13,9 @@ export default function CalendarTemplate(this: Calendar) {
 				class="ui5-cal-root"
 				onKeyDown={this._onkeydown}
 			>
+				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
+					{ CalendarHeaderTemplate.call(this) }
+				</div>
 				<div id={`${this._id}-content`} class="ui5-cal-content">
 					<DayPicker
 						id={`${this._id}-daypicker`}
@@ -20,6 +23,7 @@ export default function CalendarTemplate(this: Calendar) {
 						formatPattern={this._formatPattern}
 						selectedDates={this._selectedDatesTimestamps}
 						specialCalendarDates={this._specialCalendarDates}
+						disabledDates={this._disabledDates}
 						_hidden={this._isDayPickerHidden}
 						primaryCalendarType={this._primaryCalendarType}
 						secondaryCalendarType={this._secondaryCalendarType}
@@ -87,10 +91,6 @@ export default function CalendarTemplate(this: Calendar) {
 						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root"
 					/>
 				</div>
-
-				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
-					{ CalendarHeaderTemplate.call(this) }
-				</div>
 			</div>
 
 			<div

package/src/ColorPickerTemplate.tsx

@@ -13,6 +13,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 		>
 			<div
 				class="ui5-color-picker-main-color"
+				role="presentation"
 				style={{ "background-color": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})` }}
 				onMouseDown={this._handleMouseDown}
 				onMouseUp={this._handleMouseUp}

package/src/DatePickerPopoverTemplate.tsx

@@ -14,10 +14,11 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
-export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook }) {
+export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook, initialFocus?: string }) {
 	const header = hooks?.header || defaultHeader;
 	const content = hooks?.content || defaultContent;
 	const footer = hooks?.footer || defaultFooter;
+	const initialFocus = hooks?.initialFocus;
 
 	return (
 		<ResponsivePopover
@@ -31,6 +32,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 			accessibleName={this.pickerAccessibleName}
 			hideArrow={true}
 			_hideHeader={this._shouldHideHeader}
+			initialFocus={initialFocus}
 			onKeyDown={this._onkeydown}
 			onClose={this.onResponsivePopoverAfterClose}
 			onOpen={this.onResponsivePopoverAfterOpen}

package/src/DatePickerTemplate.tsx

@@ -6,6 +6,6 @@ import type DatePicker from "./DatePicker.js";
 export default function DatePickerTemplate(this: DatePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this),
+		DatePickerPopoverTemplate.call(this, { initialFocus: this.initialFocusId }),
 	];
 }

package/src/DateRangePickerTemplate.tsx

@@ -8,7 +8,7 @@ import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
 export default function DateRangePickerTemplate(this: DateRangePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content }),
+		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId }),
 	];
 }
 

package/src/DateTimePickerTemplate.tsx

@@ -12,7 +12,7 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, footer }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this.initialFocusId }),
 	];
 }
 

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -19,7 +19,7 @@ export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange)
 			hideArrow={true}
 			_hideHeader={true}
 			onClose={this.onPopoverClose}
-			onOpen={this.onPopoverOpen}
+			onBeforeOpen={this.onPopoverBeforeOpen}
 			onKeyDown={this.onKeyDownPopover}
 		>
 			{this._hasCurrentOptionTemplate &&

package/src/FileUploaderTemplate.tsx

@@ -20,7 +20,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 				onDragOver={this._ondrag}
 				onDrop={this._ondrop}
 			>
-				<form class="ui5-file-uploader-form" onSubmit={this._onFormSubmit}>
+				<div class="ui5-file-uploader-form">
 					<input
 						type="file"
 						class="ui5-file-uploader-native-input"
@@ -39,7 +39,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
-				</form>
+				</div>
 
 				{this.hideInput ? (
 					<slot></slot>

package/src/InputPopoverTemplate.tsx

@@ -10,14 +10,20 @@ import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
-export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult }) {
 	const suggestionsList = hooks?.suggestionsList;
+	const mobileHeader = hooks?.mobileHeader;
 
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, {
+				suggestionsList,
+				mobileHeader,
+				valueStateMessage,
+				valueStateMessageInputIcon
+			})}
 
-			{this.hasValueStateMessage &&
+			{this.hasValueStateMessage && (
 				<Popover
 					preventInitialFocus={true}
 					preventFocusRestore={true}
@@ -32,10 +38,10 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 				>
 					<div slot="header" class={this.classes.popoverValueState}>
 						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.valueStateOpen && valueStateMessage.call(this) }
+						{this.valueStateOpen && valueStateMessage.call(this)}
 					</div>
 				</Popover>
-			}
+			)}
 		</>
 	);
 }

package/src/InputTemplate.tsx

@@ -6,8 +6,9 @@ import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
 type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook, mobileHeader?: TemplateHook }) {
 	const suggestionsList = hooks?.suggestionsList;
+	const mobileHeader = hooks?.mobileHeader;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -32,6 +33,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
+						required={this.required}
 						value={this._innerValue}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
@@ -118,7 +120,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this, { suggestionsList }) }
+			{ InputPopoverTemplate.call(this, { suggestionsList, mobileHeader }) }
 		</>
 	);
 }

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -55,6 +55,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 							icon={multiSelectAll}
 							design="Transparent"
 							pressed={this._showAllItemsButtonPressed}
+							disabled={this._getSelectedItems().length === 0}
 							onClick={this.filterSelectedItems}
 							accessibleName={this._showSelectedButtonAccessibleNameText}
 						></ToggleButton>

package/src/MultiInputTemplate.tsx

@@ -1,12 +1,22 @@
 import Icon from "./Icon.js";
 import InputTemplate from "./InputTemplate.js";
 import type MultiInput from "./MultiInput.js";
+import type { MultiInputTokenDeleteEventDetail } from "./MultiInput.js";
 import Tokenizer from "./Tokenizer.js";
+import ToggleButton from "./ToggleButton.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
 
 export default function MultiInputTemplate(this: MultiInput) {
 	return [
-		InputTemplate.call(this, { preContent, postContent }),
+		InputTemplate.call(this, {
+			preContent,
+			postContent,
+			suggestionsList: multiInputSuggestionsList,
+			mobileHeader: multiInputMobileHeader,
+		}),
 	];
 }
 
@@ -51,3 +61,68 @@ function postContent(this: MultiInput) {
 		</>
 	);
 }
+
+function multiInputSuggestionsList(this: MultiInput) {
+	if (this._effectiveShowTokensInSuggestions) {
+		return (
+			<List
+				class="ui5-tokenizer-list"
+				accessibleRole={ListAccessibleRole.ListBox}
+				separators={this.suggestionSeparators}
+				selectionMode="Delete"
+				onMouseDown={this.onItemMouseDown}
+				onItemClick={this._handleSuggestionItemPress}
+				onSelectionChange={this._handleSelectionChange}
+				onItemDelete={(e: any) => {
+					const listItem = e.detail.item;
+					const tokenId = listItem.getAttribute("data-ui5-token-ref-id");
+					const token = this.tokens.find((t: any) => t._id === tokenId);
+
+					if (token) {
+						this.tokenDelete({ detail: { tokens: [token] } } as CustomEvent<MultiInputTokenDeleteEventDetail>);
+					}
+				}}
+			>
+				{this.tokens?.map((token: any, index: number) => (
+					<ListItemStandard
+						key={index}
+						class="ui5-suggestion-token-item"
+						data-ui5-token-ref-id={token._id}
+						wrappingType="Normal"
+						text={token.text}
+					/>
+				))}
+			</List>
+		);
+	}
+
+	return (
+		<List
+			accessibleRole={ListAccessibleRole.ListBox}
+			separators={this.suggestionSeparators}
+			selectionMode="Single"
+			onMouseDown={this.onItemMouseDown}
+			onItemClick={this._handleSuggestionItemPress}
+			onSelectionChange={this._handleSelectionChange}
+		>
+			<slot></slot>
+		</List>
+	);
+}
+
+function multiInputMobileHeader(this: MultiInput) {
+	return (
+		<ToggleButton
+			class="ui5-multi-input-mobile-dialog-button"
+			design="Transparent"
+			icon="multiselect-all"
+			accessibleName={this._filterButtonAccessibleName}
+			disabled={!this.tokens?.length}
+			pressed={this._effectiveShowTokensInSuggestions}
+			onClick={() => {
+				this._userToggledShowTokens = true;
+				this._showTokensInSuggestions = !this._effectiveShowTokensInSuggestions;
+			}}
+		/>
+	);
+}

package/src/RangeSliderTemplate.tsx

@@ -70,14 +70,18 @@ export function handles(this: RangeSlider) {
 
 			<SliderTooltip
 				open={this._tooltipsOpen}
-				value={this.startValue.toString()}
+				value={this.tooltipStartValue}
+				valueState={this.tooltipStartValueState}
 				min={this.min}
 				max={this.max}
 				data-sap-ui-start-value
 				editable={this.editableTooltip}
 				followRef={this._startHandle}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>
@@ -105,14 +109,18 @@ export function handles(this: RangeSlider) {
 
 			<SliderTooltip
 				open={this._tooltipsOpen}
-				value={this.endValue.toString()}
+				value={this.tooltipEndValue}
+				valueState={this.tooltipEndValueState}
 				min={this.min}
 				max={this.max}
 				data-sap-ui-end-value
 				editable={this.editableTooltip}
 				followRef={this._endHandle}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>

package/src/SliderTemplate.tsx

@@ -64,8 +64,12 @@ export function handles(this: Slider) {
 				max={this.max}
 				editable={this.editableTooltip}
 				followRef={this.shadowRoot?.querySelector("#handle1") as HTMLElement}
+				valueState={this.tooltipValueState}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>

package/src/SliderTooltipTemplate.tsx

@@ -9,9 +9,10 @@ export default function SliderTooltipTemplate(this: SliderTooltip) {
 					value={this.value}
 					type="Number"
 					accessibleNameRef="ui5-slider-InputLabel"
-					onKeyDown={this._keydown}
 					onFocusIn={this._onInputFocusin}
 					onFocusOut={this._onInputFocusOut}
+					onKeyDown={this._onInputKeydown}
+					onInput={this._onInputInput}
 					tabIndex={-1}
 					data-sap-focus-ref
 					valueState={this.valueState}

package/src/TimePickerPopoverTemplate.tsx

@@ -5,6 +5,7 @@ import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
 import alert from "@ui5/webcomponents-icons/dist/alert.js";
@@ -22,7 +23,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={!this.hasValueStateText}
+				_hideHeader={this._shouldHideHeader}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
@@ -31,6 +32,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{ !!this.showHeader && defaultHeader.call(this) }
+
 				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
 
 				<TimeSelectionClocks
@@ -61,7 +64,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
-					{ this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+					{ this.hasValueStateText && valueStateTextHeader.call(this) }
 
 					<div class="popover-content">
 						<TimeSelectionInputs
@@ -83,20 +86,37 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 	);
 }
 
+function defaultHeader(this: TimePicker) {
+	return (
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{this._headerTitleText}</span>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					icon={decline}
+					design="Transparent"
+					onClick={this._togglePicker}
+				>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
 function valueStateMessage(this: TimePicker) {
 	return (
 		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
 	);
 }
 
-function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+function valueStateTextHeader(this: TimePicker) {
 	if (!this.hasValueStateText) {
 		return;
 	}
 
 	return (
 		<div
-			slot="header"
+			slot={!this.showHeader ? "header" : undefined}
 			class={{
 				"ui5-popover-header": true,
 				"ui5-valuestatemessage-header": true,
@@ -106,7 +126,6 @@ function valueStateTextHeader(this: TimePicker, style?: Record<string, string>)
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			}}
-			style={style}
 		>
 			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
 			{ valueStateMessage.call(this) }

package/src/features/InputSuggestionsTemplate.tsx

@@ -7,8 +7,10 @@ import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 import ListAccessibleRole from "../types/ListAccessibleRole.js";
 
-export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
 	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	// Mobile header hook - intended only for MultiInput design scenario
+	const mobileHeader = hooks?.mobileHeader;
 	const valueStateMessage = hooks?.valueStateMessage;
 	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
 
@@ -45,34 +47,35 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 									placeholder={this.placeholder}
 									onInput={this._handleInput}
 								/>
+								{mobileHeader?.call(this)}
 							</div>
 						</div>
-					</div>
 
-					{this.hasValueStateMessage &&
-					<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
-						{ this.open && valueStateMessage?.call(this) }
+						{this.hasValueStateMessage &&
+							<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
+								<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+								{this.open && valueStateMessage?.call(this)}
+							</div>
+						}
 					</div>
-					}
 				</>
 			}
 
 			{!this._isPhone && this.hasValueStateMessage &&
-					<div
-						slot="header"
-						class={{
-							"ui5-responsive-popover-header": true,
-							...this.classes.popoverValueState,
-						}}
-						style={this.styles.suggestionPopoverHeader}
-					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
-						{ this.open && valueStateMessage?.call(this) }
-					</div>
+				<div
+					slot="header"
+					class={{
+						"ui5-responsive-popover-header": true,
+						...this.classes.popoverValueState,
+					}}
+					style={this.styles.suggestionPopoverHeader}
+				>
+					<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+					{this.open && valueStateMessage?.call(this)}
+				</div>
 			}
 
-			{ suggestionsList.call(this) }
+			{ this.showSuggestions && suggestionsList.call(this) }
 
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">