@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/src/CarouselTemplate.tsx

@@ -21,10 +21,10 @@ export default function CarouselTemplate(this: Carousel) {
 			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
-				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
-					{this.items.map(itemInfo =>
+				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentPageIndex * (this._itemWidth || 0)}px, 0, 0` }}>
+					{this.items.map((itemInfo, i) =>
 						<div
-							data-sap-focus-ref
+							data-sap-focus-ref={this._focusedItemIndex === i ? true : undefined}
 							id={itemInfo.id}
 							class={{
 								"ui5-carousel-item": true,
@@ -67,7 +67,7 @@ function arrowBack(this: Carousel) {
 	return <Icon name={slimArrowLeft}
 		tabindex={-1}
 		data-ui5-arrow-back
-		title={this.previousPageText	}
+		title={this.previousPageText}
 		mode="Decorative"
 		class={{
 			"ui5-carousel-navigation-button": true,
@@ -106,5 +106,5 @@ function navIndicator(this: Carousel) {
 		<div
 			dir="auto"
 			class="ui5-carousel-navigation-text"
-		>{this._currentSlideIndex + 1}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
+		>{this._currentPageIndex + 1}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
 }

package/src/ColorPaletteItemTemplate.tsx

@@ -6,9 +6,10 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			class="ui5-cp-item"
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
-			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			aria-label={this.getLabelText}
 			aria-pressed={this.selected}
-			title={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			title={this.getLabelText}
+			onClick={this._onClick}
 		></div>
 	);
 }

package/src/ColorPalettePopoverTemplate.tsx

@@ -9,11 +9,12 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {
 		<ResponsivePopover
 			hideArrow={true}
 			contentOnlyOnDesktop={true}
-			placement="Bottom"
+			placement={this.placement}
 			opener={this.opener}
 			open={this._open}
 			onClose={this.onAfterClose}
 			onOpen={this.onAfterOpen}
+			accessibleName={this._colorPaletteTitle}
 		>
 			<div slot="header" class="ui5-cp-header">
 				<Title level="H1" wrappingType="None">
@@ -27,6 +28,8 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {
 					showRecentColors={this.showRecentColors}
 					showDefaultColor={this.showDefaultColor}
 					defaultColor={this.defaultColor}
+					accessibleName={this.accessibleName}
+					accessibleNameRef={this.accessibleNameRef}
 					popupMode={true}
 					onItemClick={this.onSelectedColor}
 				>

package/src/ColorPaletteTemplate.tsx

@@ -32,7 +32,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					</div>
 				}
 				<div class="ui5-cp-item-container"
-					role="region"
+					role="group"
 					aria-label={this.colorContainerLabel}
 					onKeyDown={this._onColorContainerKeyDown}
 				>
@@ -59,8 +59,8 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					<div class="ui5-cp-recent-colors-wrapper">
 						<div class="ui5-cp-separator"></div>
 						<div class="ui5-cp-recent-colors-container" onKeyDown={this._onRecentColorsContainerKeyDown}>
-							{this.recentColors.map(color =>
-								<ColorPaletteItem value={color}/>
+							{this.recentColors.map((color, index) =>
+								<ColorPaletteItem value={color} index={index + 1}/>
 							)}
 						</div>
 					</div>

package/src/ColorPickerTemplate.tsx

@@ -6,9 +6,14 @@ import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
-		<section class="ui5-color-picker-root">
+		<div
+			class="ui5-color-picker-root"
+			role="group"
+			aria-label={this.colorPickerLabel}
+		>
 			<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}
@@ -18,13 +23,17 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 				<div
 					class="ui5-color-picker-circle"
 					style={{
-						left: `${this._selectedCoordinates.x}px`,
-						top: `${this._selectedCoordinates.y}px`,
+						left: `${this._selectedCoordinates.x}%`,
+						top: `${this._selectedCoordinates.y}%`,
 					}}
 				></div>
 			</div>
 
-			<div class="ui5-color-picker-sliders-wrapper">
+			<div
+				class="ui5-color-picker-sliders-wrapper"
+				role="group"
+				aria-label={this.sliderGroupLabel}
+			>
 				<Slider
 					disabled={this.inputsDisabled}
 					class="ui5-color-picker-hue-slider"
@@ -103,7 +112,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 							id="alpha"
 							disabled={this.inputsDisabled}
 							class="ui5-color-channel-input"
-							value={String(this._alpha)}
+							value={this._alphaTemp ?? String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
 							onInput={this._handleAlphaInput}
@@ -123,6 +132,6 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					</div>
 				</div>
 			}
-		</section>
+		</div>
 	);
 }

package/src/ComboBoxItemTemplate.tsx

@@ -9,7 +9,7 @@ function listItemContent(this: ComboBoxItem) {
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
+				{ this.markupText && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.markupText }}></span> }
 				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 			</div>
 		</div>

package/src/ComboBoxPopoverTemplate.tsx

@@ -2,10 +2,13 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import Input from "./Input.js";
+import Title from "./Title.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 import type ComboBox from "./ComboBox.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
@@ -30,13 +33,21 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				onKeyDown={this._handlePopoverKeydown}
 				onFocusOut={this._handlePopoverFocusout}
 			>
-				<BusyIndicator active={this.loading} class="ui5-combobox-busy"/>
+				{this.loading &&
+					<BusyIndicator active={true} class="ui5-combobox-busy"/>
+				}
 
-				{this._isPhone &&
+				{!this.loading && this._isPhone &&
 				<>
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
-							<span>{this._headerTitleText}</span>
+							<Title
+								level="H1"
+								wrappingType="None"
+								class="ui5-responsive-popover-header-text"
+							>
+								{this._headerTitleText}
+							</Title>
 						</div>
 
 						<div class="row">
@@ -50,7 +61,18 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 								onInput={this._handleMobileInput}
 								onChange={this._inputChange}
 							>
-								{ this._filteredItems.map(item => <SuggestionItem text={item.text} additional-text={item.additionalText}/>)}
+								{ this._filteredItems.flatMap(item => {
+									if (item.isGroupItem && item.items) {
+										// For group items, return all nested items
+										return item.items
+											.filter(nestedItem => !!nestedItem)
+											.map(nestedItem =>
+												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
+											);
+									}
+									// For regular items
+									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
+								})}
 							</Input>
 						</div>
 					</div>
@@ -78,7 +100,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				</div>
 				}
 
-				{!!this._filteredItems.length &&
+				{!this.loading && !!this._filteredItems.length &&
 				<List
 					class="ui5-combobox-items-list"
 					separators="None"
@@ -116,7 +138,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 			hideArrow={true}
 			tabindex={-1}
 			class="ui5-valuestatemessage-popover"
-			horizontalAlign={this._valueStatePopoverHorizontalAlign}
+			horizontalAlign={PopoverHorizontalAlign.Start}
 			placement="Bottom"
 			opener={this}
 			open={this.valueStateOpen}

package/src/ComboBoxTemplate.tsx

@@ -62,6 +62,7 @@ export default function ComboBoxTemplate(this: ComboBox) {
 						"inputIcon--pressed": this._iconPressed,
 					}}
 					accessibleName={this._iconAccessibleNameText}
+					onMouseDown={this._arrowMouseDown}
 					onClick={this._arrowClick}
 				/>
 				}

package/src/DatePickerInputTemplate.tsx

@@ -14,6 +14,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				data-sap-focus-ref
 				id={`${this._id}-inner`}
 				class="ui5-date-picker-input"
+				part="input"
 				placeholder={this._placeholder}
 				type={this.type}
 				value={this.displayValue}
@@ -25,8 +26,9 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				_shouldOpenValueStatePopover={!this.open}
 				onChange={this._onInputChange}
 				onInput={this._onInputInput}
-				onSubmit={this._onInputSubmit}
+				onui5-_request-submit={this._onInputRequestSubmit}
 				onKeyDown={this._onkeydown}
+				showClearIcon={this.showClearIcon}
 			>
 
 				{!this.open && this.valueStateMessage.length > 0 &&

package/src/DatePickerPopoverTemplate.tsx

@@ -5,7 +5,6 @@ import Icon from "./Icon.js";
 import CalendarDate from "./CalendarDate.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.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";
@@ -14,15 +13,16 @@ 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
 			id={`${this._id}-responsive-popover`}
-			class="ui5-date-picker-popover"
+			class="ui5-date-picker-popover ui5-popover-with-value-state-header-phone"
 			opener={this}
 			open={this.open}
 			allowTargetOverlap
@@ -31,6 +31,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}
@@ -52,13 +53,6 @@ function defaultHeader(this: DatePicker) {
 		<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>
 	);
@@ -128,4 +122,23 @@ function valueStateMessageInputIcon(this: DatePicker) {
 	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
 }
 
-function defaultFooter() {}
+function defaultFooter(this: DatePicker) {
+	return (
+		<div
+			slot="footer"
+			class={{
+				"ui5-dt-picker-footer": true,
+				"ui5-dt-picker-footer-time-hidden": isPhone()
+			}}>
+
+			<Button
+				id="cancel"
+				class="ui5-dt-picker-action"
+				design="Transparent"
+				onClick={this._togglePicker}
+			>
+				{this.btnCancelLabel}
+			</Button>
+		</div>
+	);
+}

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

@@ -4,11 +4,12 @@ import type DateRangePicker from "./DateRangePicker.js";
 
 import DatePickerInputTemplate from "./DatePickerInputTemplate.js";
 import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+import Button from "./Button.js";
 
 export default function DateRangePickerTemplate(this: DateRangePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content }),
+		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId, footer: this._isPhone ? footer : undefined }),
 	];
 }
 
@@ -29,8 +30,35 @@ function content(this: DateRangePicker) {
 			hideWeekNumbers={this.hideWeekNumbers}
 			_currentPicker={this._calendarCurrentPicker}
 			_pickersMode={this._calendarPickersMode}
+			_showTwoMonths={this.showTwoMonths}
 		>
 			<CalendarDateRange startValue={this.startValue} endValue={this.endValue} />
 		</Calendar>
 	);
 }
+
+function footer(this: DateRangePicker) {
+	return (
+		<div
+			slot="footer"
+			class="ui5-dt-picker-footer">
+			<Button
+				id="ok"
+				class="ui5-dt-picker-action"
+				design="Emphasized"
+				disabled={this._submitDisabled}
+				onClick={this._submitClick}
+			>
+				{this._okButtonText}
+			</Button>
+			<Button
+				id="cancel"
+				class="ui5-dt-picker-action"
+				design="Transparent"
+				onClick={this._cancelClick}
+			>
+				{this._cancelButtonText}
+			</Button>
+		</div>
+	);
+}

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/DayPickerTemplate.tsx

@@ -21,10 +21,10 @@ export default function DayPickerTemplate(this: DayPicker) {
 					{this._dayNames.map(day =>
 						<div
 							role="columnheader"
-							aria-label={day.name}
+							aria-label={day.ultraShortName ? day.name : undefined}
 							class={day.classes}
 						>
-							{day.ultraShortName}
+							{day.ultraShortName ? day.ultraShortName : <span class="ui5-hidden-text">{day.name}</span>}
 						</div>
 					)}
 				</div>

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -19,8 +19,9 @@ export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange)
 			hideArrow={true}
 			_hideHeader={true}
 			onClose={this.onPopoverClose}
-			onOpen={this.onPopoverOpen}
+			onBeforeOpen={this.onPopoverBeforeOpen}
 			onKeyDown={this.onKeyDownPopover}
+			accessibleName={this.popoverAccessibleName}
 		>
 			{this._hasCurrentOptionTemplate &&
 				<div slot="header" class="ui5-ddr-header">

package/src/FileUploaderTemplate.tsx

@@ -1,5 +1,5 @@
 import Icon from "./Icon.js";
-import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+import browseIcon from "@ui5/webcomponents-icons/dist/browse-folder.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -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>
@@ -86,7 +86,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 							)}
 
 							<Icon
-								name={valueHelp}
+								name={browseIcon}
 								class="ui5-file-uploader-value-help-icon inputIcon"
 								title={this.valueHelpTitle}
 							/>

package/src/FormTemplate.tsx

@@ -8,6 +8,16 @@ export default function FormTemplate(this: Form) {
 			role={this.effectiveAccessibleRole}
 			aria-label={this.effectiveAccessibleName}
 			aria-labelledby={this.effectiveАccessibleNameRef}
+			style={{
+				"--ui5-form-columns-s": this.columnsS,
+				"--ui5-form-columns-m": this.columnsM,
+				"--ui5-form-columns-l": this.columnsL,
+				"--ui5-form-columns-xl": this.columnsXl,
+				"--ui5-form-item-layout-S": this.getFormItemLayout("S"),
+				"--ui5-form-item-layout-M": this.getFormItemLayout("M"),
+				"--ui5-form-item-layout-L": this.getFormItemLayout("L"),
+				"--ui5-form-item-layout-XL": this.getFormItemLayout("XL"),
+			}}
 		>
 			{this.hasHeader &&
 				<div class="ui5-form-header" part="header">
@@ -19,22 +29,22 @@ export default function FormTemplate(this: Form) {
 				</div>
 			}
 
-			{ this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this) }
+			{this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this)}
 		</div>
 	);
 }
 
 function groupedItemsLayout(this: Form) {
 	return <div class="ui5-form-layout" part="layout">
-		{ this.groupItemsInfo.map(groupItemInfo => {
+		{this.groupItemsInfo.map(groupItemInfo => {
 			const groupItem = groupItemInfo.groupItem;
 			return <div
-				class={{
-					"ui5-form-column": true,
-					[`ui5-form-column-spanL-${groupItem.colsL}`]: true,
-					[`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
-					[`ui5-form-column-spanM-${groupItem.colsM}`]: true,
-					[`ui5-form-column-spanS-${groupItem.colsS}`]: true,
+				class="ui5-form-column"
+				style={{
+					"--ui5-form-column-span-s": groupItem.colsS,
+					"--ui5-form-column-span-m": groupItem.colsM,
+					"--ui5-form-column-span-l": groupItem.colsL,
+					"--ui5-form-column-span-xl": groupItem.colsXl,
 				}}
 				part="column"
 			>
@@ -43,12 +53,12 @@ function groupedItemsLayout(this: Form) {
 					aria-labelledby={groupItemInfo.accessibleNameRef}
 					aria-label={groupItemInfo.accessibleName}
 				>
-					{ groupItem.headerText &&
+					{groupItem.headerText &&
 						<div class="ui5-form-group-heading">
 							<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
 						</div>
 					}
-					{ this.accessibleMode === "Edit" ?
+					{this.accessibleMode === "Edit" ?
 						<div class="ui5-form-group-layout">
 							<slot name={groupItem._individualSlot}></slot>
 						</div>
@@ -64,29 +74,37 @@ function groupedItemsLayout(this: Form) {
 }
 
 function standaloneItemsLayout(this: Form) {
-	return (
-		this.accessibleMode === "Edit" ?
-			<div class="ui5-form-layout" part="layout">
-				{ standaloneItemsLayoutContent.call(this) }
+	const column = <div
+		class="ui5-form-column"
+		style={{
+			"--ui5-form-column-span-s": this.columnsS,
+			"--ui5-form-column-span-m": this.columnsM,
+			"--ui5-form-column-span-l": this.columnsL,
+			"--ui5-form-column-span-xl": this.columnsXl,
+		}}
+		part="column"
+	>
+		{this.accessibleMode === "Edit" ?
+			<div class="ui5-form-group-layout">
+				{standaloneItemsLayoutContent.call(this)}
 			</div>
 			:
-			<dl class="ui5-form-layout" part="layout">
-				{ standaloneItemsLayoutContent.call(this) }
+			<dl class="ui5-form-group-layout">
+				{standaloneItemsLayoutContent.call(this)}
 			</dl>
-	);
+		}
+	</div>;
+
+	return <div class="ui5-form-layout" part="layout">{column}</div>;
 }
 
 function standaloneItemsLayoutContent(this: Form) {
 	return this.itemsInfo.map(itemInfo => {
 		const item = itemInfo.item;
 		return (
-			<div class={{
-				"ui5-form-item": true,
-				[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
-			}}
-			>
+			<div class="ui5-form-item">
 				<slot name={item._individualSlot}></slot>
-			</div>
+			</div >
 		);
 	});
 }

package/src/IconTemplate.tsx

@@ -1,6 +1,24 @@
 import type Icon from "./Icon.js";
 
 export default function IconTemplate(this: Icon) {
+	if (this.hasFontIcon) {
+		return (
+			<span
+				class="ui5-icon-root"
+				part="root"
+				tabindex={this._tabIndex}
+				role={this.effectiveAccessibleRole}
+				aria-label={this.effectiveAccessibleName}
+				aria-hidden={this.effectiveAriaHidden}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+			>
+				<slot name="fontIcon"></slot>
+			</span>
+		);
+	}
+
 	return (
 		<svg
 			class="ui5-icon-root"
@@ -16,6 +34,7 @@ export default function IconTemplate(this: Icon) {
 			xmlns="http://www.w3.org/2000/svg"
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
+			onClick={this._onclick}
 		>
 			{ this.hasIconTooltip &&
                 <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>

package/src/InputPopoverTemplate.tsx

@@ -6,17 +6,24 @@ import alert from "@ui5/webcomponents-icons/dist/alert.js";
 import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import information from "@ui5/webcomponents-icons/dist/information.js";
 
+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}
@@ -24,17 +31,17 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 					class="ui5-valuestatemessage-popover"
 					placement="Bottom"
 					tabindex={-1}
-					horizontalAlign={this._valueStatePopoverHorizontalAlign}
+					horizontalAlign={PopoverHorizontalAlign.Start}
 					opener={this}
 					open={this.valueStateOpen}
 					onClose={this._handleValueStatePopoverAfterClose}
 				>
 					<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>
-			}
+			)}
 		</>
 	);
 }