@openui5/sap.ui.webc.main 1.97.1 → 1.100.0

package/src/sap/ui/webc/main/thirdparty/Popover.js

@@ -1,9 +1,8 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/util/PopupUtils', 'sap/ui/webc/common/thirdparty/base/util/clamp', './Popup', './types/PopoverPlacementType', './types/PopoverVerticalAlign', './types/PopoverHorizontalAlign', './popup-utils/PopoverRegistry', './generated/templates/PopoverTemplate.lit', './generated/themes/BrowserScrollbar.css', './generated/themes/PopupsCommon.css', './generated/themes/Popover.css'], function (Integer, ResizeHandler, PopupUtils, clamp, Popup, PopoverPlacementType, PopoverVerticalAlign, PopoverHorizontalAlign, PopoverRegistry, PopoverTemplate_lit, BrowserScrollbar_css, PopupsCommon_css, Popover_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/util/PopupUtils', 'sap/ui/webc/common/thirdparty/base/util/clamp', './Popup', './types/PopoverPlacementType', './types/PopoverVerticalAlign', './types/PopoverHorizontalAlign', './popup-utils/PopoverRegistry', './generated/templates/PopoverTemplate.lit', './generated/themes/BrowserScrollbar.css', './generated/themes/PopupsCommon.css', './generated/themes/Popover.css'], function (Integer, Device, PopupUtils, clamp, Popup, PopoverPlacementType, PopoverVerticalAlign, PopoverHorizontalAlign, PopoverRegistry, PopoverTemplate_lit, BrowserScrollbar_css, PopupsCommon_css, Popover_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
-	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
 	var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
 
 	const arrowSize = 8;
@@ -37,6 +36,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			allowTargetOverlap: {
 				type: Boolean,
 			},
+			opener: {
+				type: String,
+			},
 			disableScrolling: {
 				type: Boolean,
 			},
@@ -54,11 +56,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				type: PopoverPlacementType,
 				defaultValue: PopoverPlacementType.Right,
 			},
-			_maxContentHeight: {
+			_maxHeight: {
 				type: Integer__default,
 				noAttribute: true,
 			},
-			_maxContentWidth: {
+			_maxWidth: {
 				type: Integer__default,
 				noAttribute: true,
 			},
@@ -78,7 +80,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 	class Popover extends Popup {
 		constructor() {
 			super();
-			this._handleResize = this.handleResize.bind(this);
 		}
 		static get metadata() {
 			return metadata;
@@ -92,11 +93,20 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 		static get VIEWPORT_MARGIN() {
 			return 10;
 		}
-		onEnterDOM() {
-			ResizeHandler__default.register(this, this._handleResize);
+		static get ARROW_MARGIN() {
+			return 6;
 		}
-		onExitDOM() {
-			ResizeHandler__default.deregister(this, this._handleResize);
+		onAfterRendering() {
+			if (!this.isOpen() && this.open) {
+				const opener = document.getElementById(this.opener);
+				if (!opener) {
+					console.warn("Valid opener id is required.");
+					return;
+				}
+				this.showAt(opener);
+			} else if (this.isOpen() && !this.open) {
+				this.close();
+			}
 		}
 		isOpenerClicked(event) {
 			const target = event.target;
@@ -140,7 +150,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				&& openerRect.left === 0
 				&& openerRect.right === 0;
 		}
-		handleResize() {
+		_resize() {
+			super._resize();
 			if (this.opened) {
 				this.reposition();
 			}
@@ -184,37 +195,56 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			if (this.actualPlacementType === PopoverPlacementType.Bottom) {
 				top = Math.max(top, this._top);
 			}
-			let { arrowX, arrowY } = placement;
-			const isVertical = this.actualPlacementType === PopoverPlacementType.Top
-				|| this.actualPlacementType === PopoverPlacementType.Bottom;
+			const isVertical = this.actualPlacementType === PopoverPlacementType.Top || this.actualPlacementType === PopoverPlacementType.Bottom;
+			const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
+			const arrow = this._clampArrowPlacement(placement.arrow, isVertical, this._top, this._left, popoverSize, borderRadius);
+			this.arrowTranslateX = arrow.x;
+			this.arrowTranslateY = arrow.y;
+			top = this._adjustForIOSKeyboard(top);
+			Object.assign(this.style, {
+				top: `${top}px`,
+				left: `${left}px`,
+			});
+			super._show();
+			if (stretching && this._width) {
+				this.style.width = this._width;
+			}
+		}
+		_clampArrowPlacement({ x, y }, isVertical, top, left, { width, height }, borderRadius) {
+			const maxY = this._getArrowRange(height, borderRadius);
+			const maxX = this._getArrowRange(width, borderRadius);
 			if (isVertical) {
-				const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - this._left;
-				const popoverOnRightBorderOffset = this._left + popoverSize.width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;
+				const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - left;
+				const popoverOnRightBorderOffset = left + width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;
 				if (popoverOnLeftBorderOffset > 0) {
-					arrowX -= popoverOnLeftBorderOffset;
+					x = Math.max(x - popoverOnLeftBorderOffset, -maxX);
 				} else if (popoverOnRightBorderOffset > 0) {
-					arrowX += popoverOnRightBorderOffset;
+					x = Math.min(x + popoverOnRightBorderOffset, maxX);
 				}
 			}
-			this.arrowTranslateX = Math.round(arrowX);
 			if (!isVertical) {
-				const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - this._top;
-				const popoverOnBottomBorderOffset = this._top + popoverSize.height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
+				const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - top;
+				const popoverOnBottomBorderOffset = top + height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
 				if (popoverOnTopBorderOffset > 0) {
-					arrowY -= popoverOnTopBorderOffset;
+					y = Math.max(y - popoverOnTopBorderOffset, -maxY);
 				} else if (popoverOnBottomBorderOffset > 0) {
-					arrowY += popoverOnBottomBorderOffset;
+					y = Math.min(y + popoverOnBottomBorderOffset, maxY);
 				}
 			}
-			this.arrowTranslateY = Math.round(arrowY);
-			Object.assign(this.style, {
-				top: `${top}px`,
-				left: `${left}px`,
-			});
-			super._show();
-			if (stretching && this._width) {
-				this.style.width = this._width;
+			return {
+				x: Math.round(x),
+				y: Math.round(y),
+			};
+		}
+		_getArrowRange(dimension, borderRadius) {
+			return Math.floor((dimension / 2) - (borderRadius + Popover.ARROW_MARGIN));
+		}
+		_adjustForIOSKeyboard(top) {
+			if (!Device.isIOS()) {
+				return top;
 			}
+			const actualTop = Math.ceil(this.getBoundingClientRect().top);
+			return top + (Number.parseInt(this.style.top || "0") - actualTop);
 		}
 		getPopoverSize() {
 			if (!this.opened) {
@@ -243,21 +273,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			const clientHeight = document.documentElement.clientHeight;
 			let maxHeight = clientHeight;
 			let maxWidth = clientWidth;
-			let width = "";
-			let height = "";
 			const placementType = this.getActualPlacementType(targetRect, popoverSize);
 			this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placementType, targetRect);
 			const isVertical = placementType === PopoverPlacementType.Top
 				|| placementType === PopoverPlacementType.Bottom;
 			if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && isVertical) {
 				popoverSize.width = targetRect.width;
-				width = `${targetRect.width}px`;
+				this._width = `${targetRect.width}px`;
 			} else if (this.verticalAlign === PopoverVerticalAlign.Stretch && !isVertical) {
 				popoverSize.height = targetRect.height;
-				height = `${targetRect.height}px`;
 			}
-			this._width = width;
-			this._height = height;
 			const arrowOffset = this.hideArrow ? 0 : arrowSize;
 			switch (placementType) {
 			case PopoverPlacementType.Top:
@@ -269,10 +294,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				break;
 			case PopoverPlacementType.Bottom:
 				left = this.getVerticalLeft(targetRect, popoverSize);
+				top = targetRect.bottom + arrowOffset;
 				if (allowTargetOverlap) {
-					top = Math.max(Math.min(targetRect.bottom + arrowOffset, clientHeight - popoverSize.height), 0);
+					top = Math.max(Math.min(top, clientHeight - popoverSize.height), 0);
 				} else {
-					top = targetRect.bottom + arrowOffset;
 					maxHeight = clientHeight - targetRect.bottom - arrowOffset;
 				}
 				break;
@@ -284,13 +309,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				}
 				break;
 			case PopoverPlacementType.Right:
+				left = targetRect.left + targetRect.width + arrowOffset;
+				top = this.getHorizontalTop(targetRect, popoverSize);
 				if (allowTargetOverlap) {
-					left = Math.max(Math.min(targetRect.left + targetRect.width + arrowOffset, clientWidth - popoverSize.width), 0);
+					left = Math.max(Math.min(left, clientWidth - popoverSize.width), 0);
 				} else {
-					left = targetRect.left + targetRect.width + arrowOffset;
 					maxWidth = clientWidth - targetRect.right - arrowOffset;
 				}
-				top = this.getHorizontalTop(targetRect, popoverSize);
 				break;
 			}
 			if (isVertical) {
@@ -306,26 +331,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 					top -= top + popoverSize.height - clientHeight;
 				}
 			}
-			let maxContentHeight = maxHeight;
-			if (this._displayHeader) {
-				const headerDomRef = this.shadowRoot.querySelector(".ui5-popup-header-root")
-					|| this.shadowRoot.querySelector(".ui5-popup-header-text");
-				if (headerDomRef) {
-					maxContentHeight = maxHeight - headerDomRef.offsetHeight;
-				}
-			}
-			this._maxContentHeight = Math.round(maxContentHeight - Popover.VIEWPORT_MARGIN);
-			this._maxContentWidth = Math.round(maxWidth - Popover.VIEWPORT_MARGIN);
-			const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical);
+			this._maxHeight = Math.round(maxHeight - Popover.VIEWPORT_MARGIN);
+			this._maxWidth = Math.round(maxWidth - Popover.VIEWPORT_MARGIN);
 			if (this._left === undefined || Math.abs(this._left - left) > 1.5) {
 				this._left = Math.round(left);
 			}
 			if (this._top === undefined || Math.abs(this._top - top) > 1.5) {
 				this._top = Math.round(top);
 			}
+			const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical);
 			return {
-				arrowX: arrowPos.x,
-				arrowY: arrowPos.y,
+				arrow: arrowPos,
 				top: this._top,
 				left: this._left,
 				placementType,
@@ -436,7 +452,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			return this.hideBackdrop;
 		}
 		get _ariaLabelledBy() {
-			return this.accessibleName ? undefined : "ui5-popup-header";
+			return this._ariaLabel ? undefined : "ui5-popup-header";
 		}
 		get _ariaModal() {
 			return true;
@@ -444,15 +460,20 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 		get styles() {
 			return {
 				...super.styles,
-				content: {
-					"max-height": `${this._maxContentHeight}px`,
-					"max-width": `${this._maxContentWidth}px`,
+				root: {
+					"max-height": `${this._maxHeight}px`,
+					"max-width": `${this._maxWidth}px`,
 				},
 				arrow: {
 					transform: `translate(${this.arrowTranslateX}px, ${this.arrowTranslateY}px)`,
 				},
 			};
 		}
+		get classes() {
+			const allClasses = super.classes;
+			allClasses.root["ui5-popover-root"] = true;
+			return allClasses;
+		}
 		get _displayHeader() {
 			return this.header.length || this.headerText;
 		}

package/src/sap/ui/webc/main/thirdparty/Popup.js

@@ -1,9 +1,11 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/util/FocusableElements', 'sap/ui/webc/common/thirdparty/base/ManagedStyles', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/util/PopupUtils', './generated/templates/PopupTemplate.lit', './generated/templates/PopupBlockLayerTemplate.lit', './popup-utils/OpenedPopupsRegistry', './generated/themes/Popup.css', './generated/themes/PopupStaticAreaStyles.css', './generated/themes/PopupGlobal.css'], function (Render, litRender, UI5Element, Device, FocusableElements, ManagedStyles, Keys, PopupUtils, PopupTemplate_lit, PopupBlockLayerTemplate_lit, OpenedPopupsRegistry, Popup_css, PopupStaticAreaStyles_css, PopupGlobal_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/util/FocusableElements', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/ManagedStyles', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/util/PopupUtils', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/MediaRange', './generated/templates/PopupTemplate.lit', './generated/templates/PopupBlockLayerTemplate.lit', './popup-utils/OpenedPopupsRegistry', './generated/themes/Popup.css', './generated/themes/PopupStaticAreaStyles.css', './generated/themes/PopupGlobal.css'], function (Render, litRender, UI5Element, Device, FocusableElements, AriaLabelHelper, ManagedStyles, Keys, PopupUtils, ResizeHandler, MediaRange, PopupTemplate_lit, PopupBlockLayerTemplate_lit, OpenedPopupsRegistry, Popup_css, PopupStaticAreaStyles_css, PopupGlobal_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
 
 	const metadata = {
 		managedSlots: true,
@@ -20,13 +22,24 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 			preventFocusRestore: {
 				type: Boolean,
 			},
+			open: {
+				type: Boolean,
+			},
 			opened: {
 				type: Boolean,
+				noAttribute: true,
 			},
 			accessibleName: {
 				type: String,
 				defaultValue: undefined,
 			},
+			accessibleNameRef: {
+				type: String,
+				defaultValue: "",
+			},
+			 mediaRange: {
+				type: String,
+			},
 			_disableInitialFocus: {
 				type: Boolean,
 			},
@@ -52,8 +65,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 		}
 	};
 	createBlockingStyle();
-	const bodyScrollingBlockers = new Set();
+	const pageScrollingBlockers = new Set();
 	class Popup extends UI5Element__default {
+		constructor() {
+			super();
+			this._resizeHandler = this._resize.bind(this);
+		}
 		static get metadata() {
 			return metadata;
 		}
@@ -76,37 +93,37 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 			if (!this.isOpen()) {
 				this._blockLayerHidden = true;
 			}
+			ResizeHandler__default.register(this, this._resizeHandler);
 		}
 		onExitDOM() {
 			if (this.isOpen()) {
-				Popup.unblockBodyScrolling(this);
+				Popup.unblockPageScrolling(this);
 				this._removeOpenedPopup();
 			}
+			ResizeHandler__default.deregister(this, this._resizeHandler);
 		}
 		get _displayProp() {
 			return "block";
 		}
+		_resize() {
+			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+		}
 		_preventBlockLayerFocus(event) {
 			event.preventDefault();
 		}
-		static blockBodyScrolling(popup) {
-			bodyScrollingBlockers.add(popup);
-			if (bodyScrollingBlockers.size !== 1) {
+		static blockPageScrolling(popup) {
+			pageScrollingBlockers.add(popup);
+			if (pageScrollingBlockers.size !== 1) {
 				return;
 			}
-			if (window.pageYOffset > 0) {
-				document.body.style.top = `-${window.pageYOffset}px`;
-			}
-			document.body.classList.add("ui5-popup-scroll-blocker");
+			document.documentElement.classList.add("ui5-popup-scroll-blocker");
 		}
-		static unblockBodyScrolling(popup) {
-			bodyScrollingBlockers.delete(popup);
-			if (bodyScrollingBlockers.size !== 0) {
+		static unblockPageScrolling(popup) {
+			pageScrollingBlockers.delete(popup);
+			if (pageScrollingBlockers.size !== 0) {
 				return;
 			}
-			document.body.classList.remove("ui5-popup-scroll-blocker");
-			window.scrollTo(0, -parseFloat(document.body.style.top));
-			document.body.style.top = "";
+			document.documentElement.classList.remove("ui5-popup-scroll-blocker");
 		}
 		_scroll(e) {
 			this.fireEvent("scroll", {
@@ -187,7 +204,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 			if (this.isModal && !this.shouldHideBackdrop) {
 				this.getStaticAreaItemDomRef();
 				this._blockLayerHidden = false;
-				Popup.blockBodyScrolling(this);
+				Popup.blockPageScrolling(this);
 			}
 			this._zIndex = PopupUtils.getNextZIndex();
 			this.style.zIndex = this._zIndex;
@@ -198,6 +215,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 			}
 			this._addOpenedPopup();
 			this.opened = true;
+			this.open = true;
 			await Render.renderFinished();
 			this.fireEvent("after-open", {}, false, false);
 		}
@@ -214,10 +232,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 			}
 			if (this.isModal) {
 				this._blockLayerHidden = true;
-				Popup.unblockBodyScrolling(this);
+				Popup.unblockPageScrolling(this);
 			}
 			this.hide();
 			this.opened = false;
+			this.open = false;
 			if (!preventRegistryUpdate) {
 				this._removeOpenedPopup();
 			}
@@ -247,7 +266,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 		get _ariaLabelledBy() {}
 		get _ariaModal() {}
 		get _ariaLabel() {
-			return this.accessibleName || undefined;
+			return AriaLabelHelper.getEffectiveAriaLabelText(this);
 		}
 		get _root() {
 			return this.shadowRoot.querySelector(".ui5-popup-root");

package/src/sap/ui/webc/main/thirdparty/ProgressIndicator.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/common/thirdparty/base/types/AnimationMode', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/config/AnimationMode', 'sap/ui/webc/common/thirdparty/base/i18nBundle', './generated/templates/ProgressIndicatorTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/ProgressIndicator.css'], function (UI5Element, litRender, AnimationMode$1, ValueState, Integer, AnimationMode, i18nBundle, ProgressIndicatorTemplate_lit, i18nDefaults, ProgressIndicator_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/types/AnimationMode', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/config/AnimationMode', 'sap/ui/webc/common/thirdparty/base/i18nBundle', './Icon', './generated/templates/ProgressIndicatorTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/ProgressIndicator.css'], function (UI5Element, litRender, AnimationMode$1, ValueState, Integer, AnimationMode, i18nBundle, Icon, ProgressIndicatorTemplate_lit, i18nDefaults, ProgressIndicator_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -47,6 +47,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get template() {
 			return ProgressIndicatorTemplate_lit;
 		}
+		static get dependencies() {
+			return [Icon];
+		}
 		constructor() {
 			super();
 			this._previousValue = 0;

package/src/sap/ui/webc/main/thirdparty/RadioButton.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Keys', './Label', './RadioButtonGroup', './types/WrappingType', './generated/templates/RadioButtonTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/RadioButton.css'], function (Device, FeaturesRegistry, UI5Element, litRender, i18nBundle, ValueState, Keys, Label, RadioButtonGroup, WrappingType, RadioButtonTemplate_lit, i18nDefaults, RadioButton_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/Keys', './Label', './RadioButtonGroup', './types/WrappingType', './generated/templates/RadioButtonTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/RadioButton.css'], function (Device, FeaturesRegistry, UI5Element, litRender, i18nBundle, ValueState, AriaLabelHelper, Keys, Label, RadioButtonGroup, WrappingType, RadioButtonTemplate_lit, i18nDefaults, RadioButton_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -42,6 +42,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			accessibleName: {
 				type: String,
 			},
+			accessibleNameRef: {
+				type: String,
+			},
 			_tabIndex: {
 				type: String,
 				defaultValue: "-1",
@@ -214,7 +217,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			return this.disabled ? "true" : undefined;
 		}
 		get ariaLabelText() {
-			return [this.text, this.accessibleName].filter(Boolean).join(" ");
+			return [AriaLabelHelper.getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
 		}
 		get ariaDescribedBy() {
 			return this.hasValueState ? `${this._id}-descr` : undefined;

package/src/sap/ui/webc/main/thirdparty/RangeSlider.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Float', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './SliderBase', './generated/templates/RangeSliderTemplate.lit', './generated/i18n/i18n-defaults'], function (Float, i18nBundle, Keys, SliderBase, RangeSliderTemplate_lit, i18nDefaults) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Float', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './SliderBase', './Icon', './generated/templates/RangeSliderTemplate.lit', './generated/i18n/i18n-defaults'], function (Float, i18nBundle, Keys, SliderBase, Icon, RangeSliderTemplate_lit, i18nDefaults) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -32,6 +32,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Float', 'sap/ui/webc/co
 				end: "endValue",
 			};
 		}
+		static get dependencies() {
+			return [Icon];
+		}
 		constructor() {
 			super();
 			this._stateStorage.startValue = null;
@@ -332,7 +335,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Float', 'sap/ui/webc/co
 		get styles() {
 			return {
 				progress: {
-					"transform": `scaleX(${this._selectedRange})`,
+					"width": `${this._selectedRange * 100}%`,
 					"transform-origin": `${this.directionStart} top`,
 					[this.directionStart]: `${this._firstHandlePositionFromStart}%`,
 				},

package/src/sap/ui/webc/main/thirdparty/RatingIndicator.js

@@ -103,17 +103,30 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (this.disabled || this.readonly) {
 				return;
 			}
-			const down = Keys.isDown(event) || Keys.isLeft(event);
-			const up = Keys.isRight(event) || Keys.isUp(event) || Keys.isSpace(event) || Keys.isEnter(event);
-			if (down || up) {
+			const isDecrease = Keys.isDown(event) || Keys.isLeft(event);
+			const isIncrease = Keys.isRight(event) || Keys.isUp(event);
+			const isIncreaseWithReset = Keys.isSpace(event) || Keys.isEnter(event);
+			const isMin = Keys.isHome(event);
+			const isMax = Keys.isEnd(event);
+			const isNumber = (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105);
+			if (isDecrease || isIncrease || isIncreaseWithReset || isMin || isMax || isNumber) {
 				event.preventDefault();
-				if (down && this.value > 0) {
+				if (isDecrease && this.value > 0) {
 					this.value = Math.round(this.value - 1);
-					this.fireEvent("change");
-				} else if (up && this.value < this.max) {
+				} else if (isIncrease && this.value < this.max) {
 					this.value = Math.round(this.value + 1);
-					this.fireEvent("change");
+				} else if (isIncreaseWithReset) {
+					const proposedValue = Math.round(this.value + 1);
+					this.value = proposedValue > this.max ? 0 : proposedValue;
+				} else if (isMin) {
+					this.value = 0;
+				} else if (isMax) {
+					this.value = this.max;
+				} else if (isNumber) {
+					const pressedNumber = parseInt(event.key);
+					this.value = pressedNumber > this.max ? this.max : pressedNumber;
 				}
+				this.fireEvent("change");
 			}
 		}
 		_onfocusin() {

package/src/sap/ui/webc/main/thirdparty/ResponsivePopover.js

@@ -3,9 +3,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 	const metadata = {
 		tag: "ui5-responsive-popover",
 		properties:  {
-			withPadding: {
-				type: Boolean,
-			},
 			contentOnlyOnDesktop: {
 				type: Boolean,
 			},
@@ -40,6 +37,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		}
 		static get dependencies() {
 			return [
+				...Popover.dependencies,
 				Button,
 				Dialog,
 				Title,
@@ -86,10 +84,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			return ResponsivePopover.i18nBundle.getText(i18nDefaults.RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
 		}
 		_afterDialogOpen(event) {
+			this.open = true;
 			this.opened = true;
 			this._propagateDialogEvent(event);
 		}
 		_afterDialogClose(event) {
+			this.open = false;
 			this.opened = false;
 			this._propagateDialogEvent(event);
 		}

package/src/sap/ui/webc/main/thirdparty/SegmentedButton.js

@@ -11,7 +11,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		tag: "ui5-segmented-button",
 		altTag: "ui5-segmentedbutton",
 		languageAware: true,
-		properties:   {},
+		properties:   {
+			 accessibleName: {
+				type: String,
+				defaultValue: undefined,
+			},
+		},
 		managedSlots: true,
 		slots:  {
 			"default": {

package/src/sap/ui/webc/main/thirdparty/SegmentedButtonItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['./generated/templates/SegmentedButtonItemTemplate.lit', './ToggleButton', './types/ButtonDesign', './generated/i18n/i18n-defaults'], function (SegmentedButtonItemTemplate_lit, ToggleButton, ButtonDesign, i18nDefaults) { 'use strict';
+sap.ui.define(['./generated/templates/SegmentedButtonItemTemplate.lit', './ToggleButton', './types/ButtonDesign', './Icon', './generated/i18n/i18n-defaults'], function (SegmentedButtonItemTemplate_lit, ToggleButton, ButtonDesign, Icon, i18nDefaults) { 'use strict';
 
 	const metadata = {
 		tag: "ui5-segmented-button-item",
@@ -28,6 +28,9 @@ sap.ui.define(['./generated/templates/SegmentedButtonItemTemplate.lit', './Toggl
 		static get template() {
 			return SegmentedButtonItemTemplate_lit;
 		}
+		static get dependencies() {
+			return [Icon];
+		}
 		get ariaDescription() {
 			return SegmentedButtonItem.i18nBundle.getText(i18nDefaults.SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
 		}