@openui5/sap.ui.webc.fiori 1.94.0 → 1.97.0

package/src/sap/ui/webc/fiori/thirdparty/Page.js

@@ -1,9 +1,11 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './types/PageBackgroundDesign', './generated/templates/PageTemplate.lit', './generated/themes/Page.css'], function (UI5Element, litRender, PageBackgroundDesign, PageTemplate_lit, Page_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/MediaRange', './types/PageBackgroundDesign', './generated/templates/PageTemplate.lit', './generated/themes/Page.css'], function (UI5Element, litRender, ResizeHandler, MediaRange, PageBackgroundDesign, PageTemplate_lit, Page_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
 
 	const metadata = {
 		tag: "ui5-page",
@@ -23,6 +25,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			hideFooter: {
 				type: Boolean,
 			},
+			mediaRange: {
+				type: String,
+			},
 		},
 		slots:  {
 			header: {
@@ -52,6 +57,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get template() {
 			return PageTemplate_lit;
 		}
+		constructor() {
+			super();
+			this._updateMediaRange = this.updateMediaRange.bind(this);
+		}
+		onEnterDOM() {
+			ResizeHandler__default.register(this, this._updateMediaRange);
+		}
+		onExitDOM() {
+			ResizeHandler__default.deregister(this, this._updateMediaRange);
+		}
+		updateMediaRange() {
+			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+		}
 		get _contentBottom() {
 			return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
 		}
@@ -68,6 +86,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					"bottom": this.footer.length && this._contentBottom,
 					"top": this._contentTop,
 				},
+				footer: {},
 			};
 		}
 	}

package/src/sap/ui/webc/fiori/thirdparty/ProductSwitch.js

@@ -32,7 +32,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/com
 				rowSize: this._rowSize,
 				getItemsCallback: () => this.items,
 			});
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		static get metadata() {
 			return metadata;
@@ -53,10 +52,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/com
 			};
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			ProductSwitch.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 		}
 		get _ariaLabelText() {
-			return this.i18nBundle.getText(i18nDefaults.PRODUCT_SWITCH_CONTAINER_LABEL);
+			return ProductSwitch.i18nBundle.getText(i18nDefaults.PRODUCT_SWITCH_CONTAINER_LABEL);
 		}
 		onEnterDOM() {
 			this._handleResizeBound = this._handleResize.bind(this);
@@ -78,6 +77,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/com
 				this._setRowSize(4);
 			}
 		}
+		handleProductSwitchItemClick(event) {
+			this.items.forEach(item => { item.selected = false; });
+			event.target.selected = true;
+		}
 		_onfocusin(event) {
 			const target = event.target;
 			this._itemNavigation.setCurrentItem(target);

package/src/sap/ui/webc/fiori/thirdparty/ProductSwitchItem.js

@@ -31,6 +31,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			focused: {
 				type: Boolean,
 			},
+			selected: {
+				type: Boolean,
+			},
 			_tabIndex: {
 				type: String,
 				defaultValue: "-1",
@@ -90,6 +93,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.active = false;
 			}
 			if (Keys.isSpace(event)) {
+				if (Keys.isSpaceShift(event)) {
+					event.stopPropagation();
+				}
 				this._fireItemClick();
 			}
 		}

package/src/sap/ui/webc/fiori/thirdparty/ShellBar.js

@@ -11,6 +11,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 	var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 
+	const HANDLE_RESIZE_DEBOUNCE_RATE = 200;
 	const metadata = {
 		tag: "ui5-shellbar",
 		languageAware: true,
@@ -183,16 +184,24 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					this._updateClonedMenuItems();
 					if (this.hasMenuItems) {
 						const menuPopover = await this._getMenuPopover();
-						menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+						menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 					}
 				},
 			};
 			this._handleResize = async event => {
-				await this._getResponsivePopover();
-				this.overflowPopover.close();
-				this._overflowActions();
+				this._debounce(async () => {
+					await this._getResponsivePopover();
+					this.overflowPopover.close();
+					this._overflowActions();
+				}, HANDLE_RESIZE_DEBOUNCE_RATE);
 			};
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
+		}
+		_debounce(fn, delay) {
+			clearTimeout(this._debounceInterval);
+			this._debounceInterval = setTimeout(() => {
+				this._debounceInterval = null;
+				fn();
+			}, delay);
 		}
 		_menuItemPress(event) {
 			this.menuPopover.close();
@@ -299,7 +308,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				return {
 					...info,
 					classes: `${info.classes} ${shouldStayOnScreen ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-button`,
-					style: `order: ${shouldStayOnScreen ? 1 : -1}`,
+					styles: {
+						order: shouldStayOnScreen ? 1 : -1,
+					},
 				};
 			});
 			this._updateItemsInfo(newItems);
@@ -333,7 +344,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			for (let i = 0; i < itemsByPriority.length; i++) {
 				if (i < overflowCount) {
 					itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
-					itemsByPriority[i].style = `order: -1`;
+					itemsByPriority[i].styles = {
+						order: -1,
+					};
 				}
 			}
 			return itemsByPriority;
@@ -348,7 +361,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		_toggleActionPopover() {
 			const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-			this.overflowPopover.openBy(overflowButton);
+			this.overflowPopover.showAt(overflowButton);
 		}
 		onEnterDOM() {
 			ResizeHandler__default.register(this, this._handleResize);
@@ -356,6 +369,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		onExitDOM() {
 			this.menuItemsObserver.disconnect();
 			ResizeHandler__default.deregister(this, this._handleResize);
+			clearTimeout(this._debounceInterval);
+			this._debounceInterval = null;
 		}
 		_handleSearchIconPress(event) {
 			this.showSearchField = !this.showSearchField;
@@ -414,7 +429,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
 					priority: 4,
 					domOrder: this.searchField.length ? (++domOrder) : -1,
-					style: `order: ${this.searchField.length ? 1 : -10}`,
+					styles: {
+						order: this.searchField.length ? 1 : -10,
+					},
 					id: `${this._id}-item-${1}`,
 					press: this._handleSearchIconPress.bind(this),
 					show: !!this.searchField.length,
@@ -429,7 +446,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 						classes: "ui5-shellbar-custom-item ui5-shellbar-button",
 						priority: 1,
 						domOrder: (++domOrder),
-						style: `order: ${2}`,
+						styles: {
+							order: 2,
+						},
 						show: true,
 						press: this._handleCustomActionPress.bind(this),
 						custom: true,
@@ -442,7 +461,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					text: "Notifications",
 					classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
 					priority: 3,
-					style: `order: ${this.showNotifications ? 3 : -10}`,
+					styles: {
+						order: this.showNotifications ? 3 : -10,
+					},
 					id: `${this._id}-item-${2}`,
 					show: this.showNotifications,
 					domOrder: this.showNotifications ? (++domOrder) : -1,
@@ -454,7 +475,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
 					priority: 5,
 					order: 4,
-					style: `order: ${showOverflowButton ? 4 : -1}`,
+					styles: {
+						order: showOverflowButton ? 4 : -1,
+					},
 					domOrder: showOverflowButton ? (++domOrder) : -1,
 					id: `${this.id}-item-${5}`,
 					press: this._handleOverflowPress.bind(this),
@@ -464,7 +487,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					text: "Person",
 					classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
 					priority: 4,
-					style: `order: ${this.hasProfile ? 5 : -10};`,
+					styles: {
+						order: this.hasProfile ? 5 : -10,
+					},
 					profile: true,
 					id: `${this._id}-item-${3}`,
 					domOrder: this.hasProfile ? (++domOrder) : -1,
@@ -476,7 +501,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					text: "Product Switch",
 					classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
 					priority: 2,
-					style: `order: ${this.showProductSwitch ? 6 : -10}`,
+					styles: {
+						order: this.showProductSwitch ? 6 : -10,
+					},
 					id: `${this._id}-item-${4}`,
 					show: this.showProductSwitch,
 					domOrder: this.showProductSwitch ? (++domOrder) : -1,
@@ -536,6 +563,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
 					"ui5-shellbar-menu-button": true,
 				},
+				title: {},
 				items: {
 					notification: {
 						"ui5-shellbar-hidden-button": this.isIconHidden("bell"),
@@ -622,19 +650,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.hasMenuItems ? this._menuPopoverExpanded : undefined;
 		}
 		get _shellbarText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_LABEL);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_LABEL);
 		}
 		get _logoText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_LOGO);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_LOGO);
 		}
 		get _copilotText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_COPILOT);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_COPILOT);
 		}
 		get _notificationsText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_NOTIFICATIONS, this.notificationsCount);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_NOTIFICATIONS, this.notificationsCount);
 		}
 		get _cancelBtnText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_CANCEL);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_CANCEL);
 		}
 		get _showFullWidthSearch() {
 			const size = this._handleBarBreakpoints();
@@ -642,16 +670,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return ((size === "S") || searchBtnHidden);
 		}
 		get _profileText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_PROFILE);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_PROFILE);
 		}
 		get _productsText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_PRODUCTS);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_PRODUCTS);
 		}
 		get _searchText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_SEARCH);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_SEARCH);
 		}
 		get _overflowText() {
-			return this.i18nBundle.getText(i18nDefaults.SHELLBAR_OVERFLOW);
+			return ShellBar.i18nBundle.getText(i18nDefaults.SHELLBAR_OVERFLOW);
 		}
 		get accInfo() {
 			return {
@@ -684,7 +712,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents-fiori");
+			ShellBar.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 		}
 	}
 	ShellBar.define();

package/src/sap/ui/webc/fiori/thirdparty/SideNavigation.js

@@ -120,6 +120,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		handleListItemClick(event) {
 			const listItem = event.detail.item;
 			const item = listItem.associatedItem;
+			item.fireEvent("click");
 			if (item.selected) {
 				return;
 			}
@@ -131,7 +132,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		async openPicker(opener) {
 			const responsivePopover = await this.getPicker();
-			responsivePopover.open(opener);
+			responsivePopover.showAt(opener);
 		}
 		async closePicker(opener) {
 			const responsivePopover = await this.getPicker();

package/src/sap/ui/webc/fiori/thirdparty/SideNavigationItem.js

@@ -23,6 +23,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 			wholeItemToggleable: {
 				type: Boolean,
 			},
+			 title: {
+				type: String,
+			},
 		},
 		events:  {
 		},
@@ -38,6 +41,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 		static get metadata() {
 			return metadata;
 		}
+		get _tooltip() {
+			return this.title || this.text;
+		}
 	}
 	SideNavigationItem.define();
 

package/src/sap/ui/webc/fiori/thirdparty/SideNavigationSubItem.js

@@ -16,6 +16,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 			icon: {
 				type: String,
 			},
+			title: {
+				type: String,
+			},
 		},
 		events:  {
 		},
@@ -24,6 +27,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 		static get metadata() {
 			return metadata;
 		}
+		get _tooltip() {
+			return this.title || this.text;
+		}
 	}
 	SideNavigationSubItem.define();
 

package/src/sap/ui/webc/fiori/thirdparty/SortItem.js

@@ -0,0 +1,31 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5Element) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+
+	const metadata = {
+		tag: "ui5-sort-item",
+		properties:  {
+			text: {
+				type: String,
+			},
+			selected: {
+				type: Boolean,
+			},
+		},
+		slots:  {
+		},
+		events:  {
+		},
+	};
+	class SortItem extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+	}
+	SortItem.define();
+
+	return SortItem;
+
+});

package/src/sap/ui/webc/fiori/thirdparty/Timeline.js

@@ -1,15 +1,24 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', './generated/templates/TimelineTemplate.lit', './generated/i18n/i18n-defaults', './TimelineItem', './generated/themes/Timeline.css'], function (UI5Element, i18nBundle, litRender, ItemNavigation, TimelineTemplate_lit, i18nDefaults, TimelineItem, Timeline_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', './generated/templates/TimelineTemplate.lit', './generated/i18n/i18n-defaults', './TimelineItem', './generated/themes/Timeline.css', './types/TimelineLayout'], function (UI5Element, i18nBundle, litRender, Keys, ItemNavigation, NavigationMode, TimelineTemplate_lit, i18nDefaults, TimelineItem, Timeline_css, TimelineLayout) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
 	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
+	var NavigationMode__default = /*#__PURE__*/_interopDefaultLegacy(NavigationMode);
 
+	const SHORT_LINE_WIDTH = "ShortLineWidth";
+	const LARGE_LINE_WIDTH = "LargeLineWidth";
 	const metadata = {
 		tag: "ui5-timeline",
 		languageAware: true,
 		managedSlots: true,
+		properties:  {
+			layout: {
+				type: TimelineLayout,
+				defaultValue: TimelineLayout.Vertical,
+			},
+		},
 		slots:  {
 			"default": {
 				propertyName: "items",
@@ -36,21 +45,55 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._itemNavigation = new ItemNavigation__default(this, {
 				getItemsCallback: () => this.items,
 			});
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 		}
 		static get dependencies() {
 			return [TimelineItem];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents-fiori");
+			Timeline.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 		}
 		get ariaLabel() {
-			return this.i18nBundle.getText(i18nDefaults.TIMELINE_ARIA_LABEL);
+			return Timeline.i18nBundle.getText(i18nDefaults.TIMELINE_ARIA_LABEL);
 		}
 		_onfocusin(event) {
 			const target = event.target;
 			this._itemNavigation.setCurrentItem(target);
 		}
+		onBeforeRendering() {
+			this._itemNavigation.navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode__default.Horizontal : NavigationMode__default.Vertical;
+			for (let i = 0; i < this.items.length; i++) {
+				this.items[i].layout = this.layout;
+				if (this.items[i + 1] && !!this.items[i + 1].icon) {
+					this.items[i]._lineWidth = SHORT_LINE_WIDTH;
+				} else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {
+					this.items[i]._lineWidth = LARGE_LINE_WIDTH;
+				}
+			}
+		}
+		_onkeydown(event) {
+			if (Keys.isTabNext(event)) {
+				if (!event.target.nameClickable || event.isMarked === "link") {
+					this._handleTabNextOrPrevious(event, Keys.isTabNext(event));
+				}
+			} else if (Keys.isTabPrevious(event)) {
+				this._handleTabNextOrPrevious(event);
+			}
+		}
+		_handleTabNextOrPrevious(event, isNext) {
+			const nextTargetIndex = isNext ? this.items.indexOf(event.target) + 1 : this.items.indexOf(event.target) - 1;
+			const nextTarget = this.items[nextTargetIndex];
+			if (!nextTarget) {
+				return;
+			}
+			if (nextTarget.nameClickable && !isNext) {
+				event.preventDefault();
+				nextTarget.shadowRoot.querySelector("[ui5-link]").focus();
+				return;
+			}
+			event.preventDefault();
+			nextTarget.focus();
+			this._itemNavigation.setCurrentItem(nextTarget);
+		}
 	}
 	Timeline.define();
 

package/src/sap/ui/webc/fiori/thirdparty/TimelineItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/main/thirdparty/Link', './generated/templates/TimelineItemTemplate.lit', './generated/themes/TimelineItem.css'], function (UI5Element, litRender, Icon, Link, TimelineItemTemplate_lit, TimelineItem_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/main/thirdparty/Link', './generated/templates/TimelineItemTemplate.lit', './types/TimelineLayout', './generated/themes/TimelineItem.css'], function (UI5Element, litRender, Icon, Link, TimelineItemTemplate_lit, TimelineLayout, TimelineItem_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -7,6 +7,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 	var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
+	const SHORT_LINE_WIDTH = "ShortLineWidth";
+	const LARGE_LINE_WIDTH = "LargeLineWidth";
 	const metadata = {
 		tag: "ui5-timeline-item",
 		slots:  {
@@ -18,10 +20,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			icon: {
 				type: String,
 			},
-			itemName: {
+			name: {
 				type: String,
 			},
-			itemNameClickable: {
+			nameClickable: {
 				type: Boolean,
 			},
 			titleText: {
@@ -35,9 +37,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				defaultValue: "-1",
 				noAttribute: true,
 			},
+			layout: {
+				type: TimelineLayout,
+				defaultvalue: TimelineLayout.Vertical,
+			},
+			_lineWidth: {
+				type: String,
+			},
 		},
 		events:  {
-			"item-name-click": {},
+			"name-click": {},
 		},
 	};
 	class TimelineItem extends UI5Element__default {
@@ -56,8 +65,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		constructor() {
 			super();
 		}
-		onItemNamePress() {
-			this.fireEvent("item-name-click", {});
+		onNamePress() {
+			this.fireEvent("name-click", {});
 		}
 		static get dependencies() {
 			return [
@@ -65,6 +74,20 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				Link__default,
 			];
 		}
+		get classes() {
+			return {
+				indicator: {
+					"ui5-tli-indicator": true,
+					"ui5-tli-indicator-short-line": this._lineWidth === SHORT_LINE_WIDTH,
+					"ui5-tli-indicator-large-line": this._lineWidth === LARGE_LINE_WIDTH,
+				},
+				bubbleArrowPosition: {
+					"ui5-tli-bubble-arrow": true,
+					"ui5-tli-bubble-arrow--left": this.layout === TimelineLayout.Vertical,
+					"ui5-tli-bubble-arrow--top": this.layout === TimelineLayout.Horizontal,
+				},
+			};
+		}
 	}
 	TimelineItem.define();
 

package/src/sap/ui/webc/fiori/thirdparty/UploadCollection.js

@@ -31,6 +31,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: String,
 				defaultValue: UploadCollectionDnDMode.None,
 			},
+			accessibleName: {
+				type: String,
+			},
 		},
 		managedSlots: true,
 		slots:  {
@@ -44,7 +47,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		},
 		events:  {
 			drop: {},
-			"file-deleted": {
+			"item-delete": {
 				detail: {
 					item: { type: HTMLElement },
 				},
@@ -78,11 +81,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents-fiori");
+			UploadCollection.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 			this._bodyDnDHandler = event => {
 				if (this._dndOverlayMode !== UploadCollectionDnDMode.Drop) {
 					this._dndOverlayMode = event.mode;
@@ -132,7 +134,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._dndOverlayMode = UploadCollectionDnDMode.Drag;
 		}
 		_onItemDelete(event) {
-			this.fireEvent("file-deleted", { item: event.detail.item });
+			this.fireEvent("item-delete", { item: event.detail.item });
 		}
 		_onSelectionChange(event) {
 			this.fireEvent("selection-change", { selectedItems: event.detail.selectedItems });
@@ -148,6 +150,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					"uc-drag-overlay": this._dndOverlayMode === UploadCollectionDnDMode.Drag,
 					"uc-drop-overlay": this._dndOverlayMode === UploadCollectionDnDMode.Drop,
 				},
+				noFiles: {
+					"uc-no-files": true,
+					"uc-no-files-dnd-overlay": this._showDndOverlay,
+				},
 			};
 		}
 		get _root() {
@@ -160,22 +166,22 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this._dndOverlayMode !== UploadCollectionDnDMode.None;
 		}
 		get _showNoData() {
-			return this.items.length === 0 && !this._showDndOverlay;
+			return this.items.length === 0;
 		}
 		get _noDataText() {
-			return this.noDataText || this.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_NO_DATA_TEXT);
+			return this.noDataText || UploadCollection.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_NO_DATA_TEXT);
 		}
 		get _noDataDescription() {
-			return this.noDataDescription || this.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
+			return this.noDataDescription || UploadCollection.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
 		}
 		get _roleDescription() {
-			return this.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
+			return UploadCollection.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
 		}
 		get _dndOverlayText() {
 			if (this._dndOverlayMode === UploadCollectionDnDMode.Drag) {
-				return this.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
+				return UploadCollection.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
 			}
-			return this.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_DROP_FILE_INDICATOR);
+			return UploadCollection.i18nBundle.getText(i18nDefaults.UPLOADCOLLECTION_DROP_FILE_INDICATOR);
 		}
 	}
 	UploadCollection.define();