@ui5/webcomponents 2.17.0-rc.3 → 2.17.0-rc.5

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.17.0-rc.2",
+  "version": "2.17.0-rc.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -737,7 +737,7 @@
         },
         {
           "name": "ui5-calendar",
-          "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **month-picker-root** - Used to style the month picker root container.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-picker-root** - Used to style the year picker root container.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.\n- **year-range-picker-root** - Used to style the year range picker root container.\n- **calendar-header-middle-button** - Used to style the calendar header middle buttons (month/year/year-range buttons).\n- **calendar-header-arrow-button** - Used to style the calendar header navigation arrow buttons (previous/next buttons).",
+          "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n- **disabledDates** - Defines the disabled date ranges that cannot be selected in the calendar.\nUse `ui5-date-range` elements to specify ranges of disabled dates.\nEach range can define a start date, an end date, or both.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **month-picker-root** - Used to style the month picker root container.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-picker-root** - Used to style the year picker root container.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.\n- **year-range-picker-root** - Used to style the year range picker root container.\n- **calendar-header-middle-button** - Used to style the calendar header middle buttons (month/year/year-range buttons).\n- **calendar-header-arrow-button** - Used to style the calendar header navigation arrow buttons (previous/next buttons).",
           "doc-url": "",
           "attributes": [
             {
@@ -815,6 +815,10 @@
             {
               "name": "specialDates",
               "description": "Defines the special dates, visually emphasized in the calendar."
+            },
+            {
+              "name": "disabledDates",
+              "description": "Defines the disabled date ranges that cannot be selected in the calendar.\nUse `ui5-date-range` elements to specify ranges of disabled dates.\nEach range can define a start date, an end date, or both."
             }
           ],
           "events": [
@@ -9603,7 +9607,7 @@
         },
         {
           "name": "ui5-text",
-          "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.",
+          "description": "### Overview\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n### Usage\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n### Responsive behavior\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the `max-lines` property,\nby defining the number of lines the text should wrap before start truncating.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Text\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.",
           "doc-url": "",
           "attributes": [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.17.0-rc.3",
+  "version": "2.17.0-rc.5",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,24 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.17.0-rc.3",
-    "@ui5/webcomponents-icons": "2.17.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.17.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.17.0-rc.3",
-    "@ui5/webcomponents-localization": "2.17.0-rc.3",
-    "@ui5/webcomponents-theming": "2.17.0-rc.3"
+    "@ui5/webcomponents-base": "2.17.0-rc.5",
+    "@ui5/webcomponents-icons": "2.17.0-rc.5",
+    "@ui5/webcomponents-icons-business-suite": "2.17.0-rc.5",
+    "@ui5/webcomponents-icons-tnt": "2.17.0-rc.5",
+    "@ui5/webcomponents-localization": "2.17.0-rc.5",
+    "@ui5/webcomponents-theming": "2.17.0-rc.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.17.0-rc.3",
-    "chokidar-cli": "^3.0.0",
+    "@ui5/webcomponents-tools": "2.17.0-rc.5",
     "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "45ac45d27dd4c95cc840c51c95fef9d38e7586f0"
+  "gitHead": "affb457b35f4a92b8d6632de0042c8a9da7c244e"
 }

package/src/CalendarTemplate.tsx

@@ -20,6 +20,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}

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/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;
 
@@ -118,7 +119,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this, { suggestionsList }) }
+			{ InputPopoverTemplate.call(this, { suggestionsList, mobileHeader }) }
 		</>
 	);
 }

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

@@ -40,6 +40,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
+							accessibleName={this.openIconTitle}
 							mode={this._iconMode}
 							onClick={this._togglePicker}
 							class={{

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">

package/src/i18n/messagebundle.properties

@@ -85,6 +85,12 @@ BUTTON_BADGE_ONE_ITEM={0} item
 #XACT: ARIA announcement for the Button Badge with value more than 1 - "{0} items"
 BUTTON_BADGE_MANY_ITEMS={0} items
 
+#ACC: ARIA announcement for the Button role attribute
+BUTTON_ROLE_DESCRIPTION=Button
+
+#ACC: ARIA announcement for the Link role attribute
+LINK_ROLE_DESCRIPTION=Link
+
 #XACT: Text for Today item in CalendarLegend
 CAL_LEGEND_TODAY_TEXT=Today
 
@@ -420,6 +426,9 @@ MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
 #XACT: ARIA announcement for value help
 MULTIINPUT_VALUE_HELP=Value help available
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_FILTER_BUTTON_LABEL=Show selected tokens
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 
@@ -549,6 +558,12 @@ TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes
 #XACT: Time Picker Inputs tooltip/aria-label for Seconds input
 TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds
 
+#XACT: Time Picker 'Open Picker' icon title
+TIMEPICKER_OPEN_ICON_TITLE=Open Picker
+
+#XACT: Time Picker 'Open Picker' icon title when the picker is opened
+TIMEPICKER_OPEN_ICON_TITLE_OPENED=Close Picker
+
 TIMEPICKER_VALUE_MISSING=Fill in the time value in the format: {0}.
 
 TIMEPICKER_PATTERN_MISSMATCH=This format is not supported. Fill in the time value in the format: {0}.
@@ -907,6 +922,15 @@ DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=Last X Years
 #XFLD: Text for the "Next Years" option in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=Next X Years
 
+#XACT: Text for checkbox state - checked
+CHECKBOX_CHECKED=Checked
+
+#XACT: Text for checkbox state - not checked
+CHECKBOX_NOT_CHECKED=Not checked
+
+#XACT: ARIA type for checkbox
+CHECKBOX_ARIA_TYPE=Checkbox
+
 #XFLD: Label for the value input field in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=Value for X
 

package/src/themes/Suggestions.css

@@ -21,4 +21,8 @@
 
 .native-input-wrapper .ui5-input-inner-phone {
 	margin: 0;
+}
+
+.native-input-wrapper .ui5-multi-input-mobile-dialog-button {
+	margin-inline-start: 0.5rem;
 }

package/src/themes/TabInStrip.css

@@ -154,7 +154,7 @@
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
-	bottom: -0.9375rem;
+	bottom: -1rem;
 }
 
 .ui5-tab-strip-item--disabled {