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

package/src/sap/ui/webc/common/thirdparty/base/InitialConfiguration.js

@@ -10,7 +10,6 @@ sap.ui.define(['exports', './thirdparty/merge', './FeaturesRegistry', './generat
 		noConflict: false,
 		formatSettings: {},
 		fetchDefaultLanguage: false,
-		assetsPath: "",
 	};
 	const getAnimationMode = () => {
 		initConfiguration();
@@ -44,10 +43,6 @@ sap.ui.define(['exports', './thirdparty/merge', './FeaturesRegistry', './generat
 		initConfiguration();
 		return initialConfig.formatSettings;
 	};
-	const getAssetsPath = () => {
-		initConfiguration();
-		return initialConfig.assetsPath;
-	};
 	const booleanMapping = new Map();
 	booleanMapping.set("true", true);
 	booleanMapping.set("false", false);
@@ -81,12 +76,19 @@ sap.ui.define(['exports', './thirdparty/merge', './FeaturesRegistry', './generat
 			applyURLParam(key, value, "sap-ui");
 		});
 	};
+	const normalizeParamValue = (param, value) => {
+		if (param === "theme" && value.includes("@")) {
+			return value.split("@")[0];
+		}
+		return value;
+	};
 	const applyURLParam = (key, value, paramType) => {
 		const lowerCaseValue = value.toLowerCase();
 		const param = key.split(`${paramType}-`)[1];
 		if (booleanMapping.has(value)) {
 			value = booleanMapping.get(lowerCaseValue);
 		}
+		value = normalizeParamValue(param, value);
 		initialConfig[param] = value;
 	};
 	const applyOpenUI5Configuration = () => {
@@ -108,7 +110,6 @@ sap.ui.define(['exports', './thirdparty/merge', './FeaturesRegistry', './generat
 	};
 
 	exports.getAnimationMode = getAnimationMode;
-	exports.getAssetsPath = getAssetsPath;
 	exports.getCalendarType = getCalendarType;
 	exports.getFetchDefaultLanguage = getFetchDefaultLanguage;
 	exports.getFormatSettings = getFormatSettings;

package/src/sap/ui/webc/common/thirdparty/base/Keys.js

@@ -118,6 +118,8 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const isDownCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, false);
 	const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, false, true);
 	const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
+	const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
+	const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
 	const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
 	const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
 	const isHome = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && !hasModifierKeys(event);
@@ -132,7 +134,9 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const isPageUp = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && !hasModifierKeys(event);
 	const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && !hasModifierKeys(event);
 	const isPageUpShift = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, false, true);
+	const isPageUpAlt = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, true, false);
 	const isPageDownShift = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, false, true);
+	const isPageDownAlt = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, true, false);
 	const isPageUpShiftCtrl = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, true, false, true);
 	const isPageDownShiftCtrl = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, true, false, true);
 	const isPlus = event => (event.key ? event.key === "+" : event.keyCode === KeyCodes.PLUS) || (event.keyCode === KeyCodes.NUMPAD_PLUS && !hasModifierKeys(event));
@@ -147,6 +151,7 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 		return event.key === "F4" && !hasModifierKeys(event);
 	};
 	const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
+	const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
 	const isShowByArrows = event => {
 		return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event,  false,  true,  false);
 	};
@@ -167,20 +172,25 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	exports.isEscape = isEscape;
 	exports.isF4 = isF4;
 	exports.isF4Shift = isF4Shift;
+	exports.isF7 = isF7;
 	exports.isHome = isHome;
 	exports.isHomeCtrl = isHomeCtrl;
 	exports.isLeft = isLeft;
 	exports.isLeftCtrl = isLeftCtrl;
+	exports.isLeftShift = isLeftShift;
 	exports.isMinus = isMinus;
 	exports.isPageDown = isPageDown;
+	exports.isPageDownAlt = isPageDownAlt;
 	exports.isPageDownShift = isPageDownShift;
 	exports.isPageDownShiftCtrl = isPageDownShiftCtrl;
 	exports.isPageUp = isPageUp;
+	exports.isPageUpAlt = isPageUpAlt;
 	exports.isPageUpShift = isPageUpShift;
 	exports.isPageUpShiftCtrl = isPageUpShiftCtrl;
 	exports.isPlus = isPlus;
 	exports.isRight = isRight;
 	exports.isRightCtrl = isRightCtrl;
+	exports.isRightShift = isRightShift;
 	exports.isShow = isShow;
 	exports.isSpace = isSpace;
 	exports.isSpaceShift = isSpaceShift;

package/src/sap/ui/webc/common/thirdparty/base/ManagedStyles.js

@@ -0,0 +1,74 @@
+sap.ui.define(['exports', './util/createStyleInHead', './util/createLinkInHead', './CSP'], function (exports, createStyleInHead, createLinkInHead, CSP) { 'use strict';
+
+	const getStyleId = (name, value) => {
+		return value ? `${name}|${value}` : name;
+	};
+	const createStyle = (data, name, value = "") => {
+		const content = typeof data === "string" ? data : data.content;
+		if (CSP.shouldUseLinks()) {
+			const attributes = {};
+			attributes[name] = value;
+			const href = CSP.getUrl(data.packageName, data.fileName);
+			createLinkInHead(href, attributes);
+		} else if (document.adoptedStyleSheets) {
+			const stylesheet = new CSSStyleSheet();
+			stylesheet.replaceSync(content);
+			stylesheet._ui5StyleId = getStyleId(name, value);
+			document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+		} else {
+			const attributes = {};
+			attributes[name] = value;
+			createStyleInHead(content, attributes);
+		}
+	};
+	const updateStyle = (data, name, value = "") => {
+		const content = typeof data === "string" ? data : data.content;
+		if (CSP.shouldUseLinks()) {
+			document.querySelector(`head>link[${name}="${value}"]`).href = CSP.getUrl(data.packageName, data.fileName);
+		} else if (document.adoptedStyleSheets) {
+			document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value)).replaceSync(content || "");
+		} else {
+			document.querySelector(`head>style[${name}="${value}"]`).textContent = content || "";
+		}
+	};
+	const hasStyle = (name, value = "") => {
+		if (CSP.shouldUseLinks()) {
+			return !!document.querySelector(`head>link[${name}="${value}"]`);
+		}
+		if (document.adoptedStyleSheets) {
+			return !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
+		}
+		return !!document.querySelector(`head>style[${name}="${value}"]`);
+	};
+	const removeStyle = (name, value = "") => {
+		if (CSP.shouldUseLinks()) {
+			const linkElement = document.querySelector(`head>link[${name}="${value}"]`);
+			if (linkElement) {
+				linkElement.parentElement.removeChild(linkElement);
+			}
+		} else if (document.adoptedStyleSheets) {
+			document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
+		} else {
+			const styleElement = document.querySelector(`head > style[${name}="${value}"]`);
+			if (styleElement) {
+				styleElement.parentElement.removeChild(styleElement);
+			}
+		}
+	};
+	const createOrUpdateStyle = (data, name, value = "") => {
+		if (hasStyle(name, value)) {
+			updateStyle(data, name, value);
+		} else {
+			createStyle(data, name, value);
+		}
+	};
+
+	exports.createOrUpdateStyle = createOrUpdateStyle;
+	exports.createStyle = createStyle;
+	exports.hasStyle = hasStyle;
+	exports.removeStyle = removeStyle;
+	exports.updateStyle = updateStyle;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+});

package/src/sap/ui/webc/common/thirdparty/base/StaticAreaItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffectiveContentDensity', './CustomElementsScope'], function (StaticArea, updateShadowRoot, Render, getEffectiveContentDensity, CustomElementsScope) { 'use strict';
+sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffectiveContentDensity', './CustomElementsScope', './locale/getEffectiveDir'], function (StaticArea, updateShadowRoot, Render, getEffectiveContentDensity, CustomElementsScope, getEffectiveDir) { 'use strict';
 
 	class StaticAreaItem extends HTMLElement {
 		constructor() {
@@ -13,6 +13,7 @@ sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffe
 		update() {
 			if (this._rendered) {
 				this._updateContentDensity();
+				this._updateDirection();
 				updateShadowRoot(this.ownerElement, true);
 			}
 		}
@@ -25,6 +26,14 @@ sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffe
 				this.classList.remove("ui5-content-density-compact");
 			}
 		}
+		_updateDirection() {
+			const dir = getEffectiveDir(this.ownerElement);
+			if (dir) {
+				this.setAttribute("dir", dir);
+			} else {
+				this.removeAttribute("dir");
+			}
+		}
 		async getDomRef() {
 			this._updateContentDensity();
 			if (!this._rendered) {

package/src/sap/ui/webc/common/thirdparty/base/SystemCSSVars.js

@@ -1,29 +1,9 @@
-sap.ui.define(['./util/createStyleInHead'], function (createStyleInHead) { 'use strict';
+sap.ui.define(['./ManagedStyles', './generated/css/SystemCSSVars.css'], function (ManagedStyles, SystemCSSVars_css) { 'use strict';
 
-	const systemCSSVars = `
-	:root {
-		--_ui5_content_density:cozy;
-	}
-
-	[data-ui5-compact-size],
-	.ui5-content-density-compact,
-	.sapUiSizeCompact {
-		--_ui5_content_density:compact;
-	}
-
-	[dir="rtl"] {
-		--_ui5_dir:rtl;
-	}
-
-	[dir="ltr"] {
-		--_ui5_dir:ltr;
-	}
-`;
 	const insertSystemCSSVars = () => {
-		if (document.querySelector(`head>style[data-ui5-system-css-vars]`)) {
-			return;
+		if (!ManagedStyles.hasStyle("data-ui5-system-css-vars")) {
+			ManagedStyles.createStyle(SystemCSSVars_css, "data-ui5-system-css-vars");
 		}
-		createStyleInHead(systemCSSVars, { "data-ui5-system-css-vars": "" });
 	};
 
 	return insertSystemCSSVars;

package/src/sap/ui/webc/common/thirdparty/base/UI5Element.js

@@ -1,4 +1,4 @@
-sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventProvider', './util/getSingletonElementInstance', './StaticAreaItem', './updateShadowRoot', './Render', './CustomElementsRegistry', './DOMObserver', './config/NoConflict', './locale/getEffectiveDir', './types/Integer', './types/Float', './util/StringHelper', './util/isValidPropertyName', './util/SlotsHelper', './util/arraysAreEqual', './util/getClassCopy', './locale/RTLAwareRegistry', './isLegacyBrowser'], function (merge, Boot, UI5ElementMetadata, EventProvider, getSingletonElementInstance, StaticAreaItem, updateShadowRoot, Render, CustomElementsRegistry, DOMObserver, NoConflict, getEffectiveDir, Integer, Float, StringHelper, isValidPropertyName, SlotsHelper, arraysAreEqual, getClassCopy, RTLAwareRegistry, isLegacyBrowser) { 'use strict';
+sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventProvider', './util/getSingletonElementInstance', './StaticAreaItem', './updateShadowRoot', './Render', './CustomElementsRegistry', './DOMObserver', './config/NoConflict', './locale/getEffectiveDir', './types/DataType', './util/StringHelper', './util/isValidPropertyName', './util/isDescendantOf', './util/SlotsHelper', './util/arraysAreEqual', './util/getClassCopy', './locale/RTLAwareRegistry', './theming/preloadLinks'], function (merge, Boot, UI5ElementMetadata, EventProvider, getSingletonElementInstance, StaticAreaItem, updateShadowRoot, Render, CustomElementsRegistry, DOMObserver, NoConflict, getEffectiveDir, DataType, StringHelper, isValidPropertyName, isDescendantOf, SlotsHelper, arraysAreEqual, getClassCopy, RTLAwareRegistry, preloadLinks) { 'use strict';
 
 	let autoId = 0;
 	const elementTimeouts = new Map();
@@ -10,7 +10,7 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 		this.onInvalidation(changeInfo);
 		this._changedState.push(changeInfo);
 		Render.renderDeferred(this);
-		this._eventProvider.fireEvent("change", { ...changeInfo, target: this });
+		this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 	}
 	class UI5Element extends HTMLElement {
 		constructor() {
@@ -41,16 +41,12 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 		}
 		async connectedCallback() {
 			this.setAttribute(this.constructor.getMetadata().getPureTag(), "");
-			const needsShadowDOM = this.constructor._needsShadowDOM();
 			const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 			this._inDOM = true;
 			if (slotsAreManaged) {
 				this._startObservingDOMChildren();
 				await this._processChildren();
 			}
-			if (needsShadowDOM && !this.shadowRoot) {
-				await Promise.resolve();
-			}
 			if (!this._inDOM) {
 				return;
 			}
@@ -62,19 +58,16 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			}
 		}
 		disconnectedCallback() {
-			const needsShadowDOM = this.constructor._needsShadowDOM();
 			const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 			this._inDOM = false;
 			if (slotsAreManaged) {
 				this._stopObservingDOMChildren();
 			}
-			if (needsShadowDOM) {
-				if (this._fullyConnected) {
-					if (typeof this.onExitDOM === "function") {
-						this.onExitDOM();
-					}
-					this._fullyConnected = false;
+			if (this._fullyConnected) {
+				if (typeof this.onExitDOM === "function") {
+					this.onExitDOM();
 				}
+				this._fullyConnected = false;
 			}
 			if (this.staticAreaItem && this.staticAreaItem.parentElement) {
 				this.staticAreaItem.parentElement.removeChild(this.staticAreaItem);
@@ -149,7 +142,7 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 				}
 				child = this.constructor.getMetadata().constructor.validateSlotValue(child, slotData);
 				if (child.isUI5Element && slotData.invalidateOnChildChange) {
-					child._attachChange(this._getChildChangeListener(slotName));
+					child.attachInvalidate(this._getChildChangeListener(slotName));
 				}
 				if (SlotsHelper.isSlot(child)) {
 					this._attachSlotChange(child, slotName);
@@ -190,7 +183,7 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			const children = this._state[propertyName];
 			children.forEach(child => {
 				if (child && child.isUI5Element) {
-					child._detachChange(this._getChildChangeListener(slotName));
+					child.detachInvalidate(this._getChildChangeListener(slotName));
 				}
 				if (SlotsHelper.isSlot(child)) {
 					this._detachSlotChange(child, slotName);
@@ -198,11 +191,11 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			});
 			this._state[propertyName] = [];
 		}
-		_attachChange(callback) {
-			this._eventProvider.attachEvent("change", callback);
+		attachInvalidate(callback) {
+			this._eventProvider.attachEvent("invalidate", callback);
 		}
-		_detachChange(callback) {
-			this._eventProvider.detachEvent("change", callback);
+		detachInvalidate(callback) {
+			this._eventProvider.detachEvent("invalidate", callback);
 		}
 		_onChildChange(slotName, childChangeInfo) {
 			if (!this.constructor.getMetadata().shouldInvalidateOnChildChange(slotName, childChangeInfo.type, childChangeInfo.name)) {
@@ -223,12 +216,8 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 				const propertyTypeClass = properties[nameInCamelCase].type;
 				if (propertyTypeClass === Boolean) {
 					newValue = newValue !== null;
-				}
-				if (propertyTypeClass === Integer) {
-					newValue = parseInt(newValue);
-				}
-				if (propertyTypeClass === Float) {
-					newValue = parseFloat(newValue);
+				} else if (isDescendantOf(propertyTypeClass, DataType)) {
+					newValue = propertyTypeClass.attributeToProperty(newValue);
 				}
 				this[nameInCamelCase] = newValue;
 			}
@@ -237,19 +226,22 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			if (!this.constructor.getMetadata().hasAttribute(name)) {
 				return;
 			}
-			if (typeof newValue === "object") {
-				return;
-			}
+			const properties = this.constructor.getMetadata().getProperties();
+			const propertyTypeClass = properties[name].type;
 			const attrName = StringHelper.camelToKebabCase(name);
 			const attrValue = this.getAttribute(attrName);
-			if (typeof newValue === "boolean") {
+			if (propertyTypeClass === Boolean) {
 				if (newValue === true && attrValue === null) {
 					this.setAttribute(attrName, "");
 				} else if (newValue === false && attrValue !== null) {
 					this.removeAttribute(attrName);
 				}
-			} else if (attrValue !== newValue) {
-				this.setAttribute(attrName, newValue);
+			} else if (isDescendantOf(propertyTypeClass, DataType)) {
+				this.setAttribute(attrName, propertyTypeClass.propertyToAttribute(newValue));
+			} else if (typeof newValue !== "object") {
+				if (attrValue !== newValue) {
+					this.setAttribute(attrName, newValue);
+				}
 			}
 		}
 		_upgradeProperty(prop) {
@@ -331,15 +323,11 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
 				return;
 			}
-			this._assertShadowRootStructure();
-			return this.shadowRoot.children.length === 1
-				? this.shadowRoot.children[0] : this.shadowRoot.children[1];
-		}
-		_assertShadowRootStructure() {
-			const expectedChildrenCount = document.adoptedStyleSheets || isLegacyBrowser() ? 1 : 2;
-			if (this.shadowRoot.children.length !== expectedChildrenCount) {
+			const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
+			if (children.length !== 1) {
 				console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`);
 			}
+			return children[0];
 		}
 		getFocusDomRef() {
 			const domRef = this.getDomRef();
@@ -465,6 +453,8 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 						const oldState = this._state[prop];
 						if (propData.multiple && propData.compareValues) {
 							isDifferent = !arraysAreEqual(oldState, value);
+						} else if (isDescendantOf(propData.type, DataType)) {
+							isDifferent = !propData.type.valuesAreEqual(oldState, value);
 						} else {
 							isDifferent = oldState !== value;
 						}
@@ -543,6 +533,7 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 				this._generateAccessors();
 				CustomElementsRegistry.registerTag(tag);
 				window.customElements.define(tag, this);
+				preloadLinks(this);
 				if (altTag && !customElements.get(altTag)) {
 					CustomElementsRegistry.registerTag(altTag);
 					window.customElements.define(altTag, getClassCopy(this, () => {

package/src/sap/ui/webc/common/thirdparty/base/UI5ElementMetadata.js

@@ -73,7 +73,7 @@ sap.ui.define(['./types/DataType', './util/isDescendantOf', './util/StringHelper
 		}
 		hasAttribute(propName) {
 			const propData = this.getProperties()[propName];
-			return propData.type !== Object && !propData.noAttribute;
+			return propData.type !== Object && !propData.noAttribute && !propData.multiple;
 		}
 		getPropertiesList() {
 			return Object.keys(this.getProperties());

package/src/sap/ui/webc/common/thirdparty/base/asset-registries/Icons.js

@@ -55,6 +55,10 @@ sap.ui.define(['exports', '../getSharedResource'], function (exports, getSharedR
 		if (collection === "SAP-icons-TNT") {
 			collection = "tnt";
 		}
+		if (collection === "BusinessSuiteInAppSymbols") {
+			collection = "business-suite";
+			name = name.replace("icon-", "");
+		}
 		const registryKey = `${collection}/${name}`;
 		return { name, collection, registryKey };
 	};
@@ -81,6 +85,7 @@ sap.ui.define(['exports', '../getSharedResource'], function (exports, getSharedR
 	const _getRegisteredNames = async () => {
 		await getIconData("edit");
 		await getIconData("tnt/arrow");
+		await getIconData("business-suite/3d");
 		return Array.from(registry.keys());
 	};
 

package/src/sap/ui/webc/common/thirdparty/base/asset-registries/Illustrations.js

@@ -0,0 +1,28 @@
+sap.ui.define(['exports', '../getSharedResource'], function (exports, getSharedResource) { 'use strict';
+
+	const registry = getSharedResource("SVGIllustration.registry", new Map());
+	const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
+	const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => {
+		registry.set(`${set}/${name}`, {
+			dialogSvg,
+			sceneSvg,
+			spotSvg,
+			title,
+			subtitle,
+		});
+	};
+	const getIllustrationDataSync = nameProp => {
+		let set = "fiori";
+		if (nameProp.startsWith("Tnt")) {
+			set = "tnt";
+			nameProp = nameProp.replace(/^Tnt/, "");
+		}
+		return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
+	};
+
+	exports.getIllustrationDataSync = getIllustrationDataSync;
+	exports.registerIllustration = registerIllustration;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+});

package/src/sap/ui/webc/common/thirdparty/base/asset-registries/LocaleData.js

@@ -12,10 +12,13 @@ sap.ui.define(['exports', '../locale/languageChange', '../locale/getLocale', '..
 		"sh": "sr",
 	};
 	const _showAssetsWarningOnce = localeId => {
-		if (!warningShown) {
+		if (warningShown) {
+			return;
+		}
+		{
 			console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`);
-			warningShown = true;
 		}
+		warningShown = true;
 	};
 	const calcLocale = (language, region, script) => {
 		language = (language && M_ISO639_OLD_TO_NEW[language]) || language;

package/src/sap/ui/webc/common/thirdparty/base/css/FontFace.css

@@ -0,0 +1,45 @@
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 400;
+    src: local("72"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 400;
+    src: local('72-full'),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff");
+
+}
+
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold'),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold-full'),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff");
+}
+
+@font-face {
+    font-family: "72Black";
+    font-style: bold;
+    font-weight: 900;
+    src: local('72Black'),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff2"),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff");
+}

package/src/sap/ui/webc/common/thirdparty/base/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/src/sap/ui/webc/common/thirdparty/base/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}

package/src/sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation.js

@@ -25,6 +25,7 @@ sap.ui.define(['../Keys', '../util/getActiveElement', '../types/NavigationMode',
 			this._behavior = options.behavior || ItemNavigationBehavior.Static;
 			this._navigationMode = options.navigationMode || NavigationMode.Auto;
 			this._affectedPropertiesNames = options.affectedPropertiesNames || [];
+			this._skipItemsSize = options.skipItemsSize || null;
 		}
 		setCurrentItem(current) {
 			const currentItemIndex = this._getItems().indexOf(current);
@@ -61,6 +62,10 @@ sap.ui.define(['../Keys', '../util/getActiveElement', '../types/NavigationMode',
 				this._handleHome();
 			} else if (Keys.isEnd(event)) {
 				this._handleEnd();
+			} else if (Keys.isPageUp(event)) {
+				this._handlePageUp();
+			} else if (Keys.isPageDown(event)) {
+				this._handlePageDown();
 			} else {
 				return;
 			}
@@ -129,6 +134,39 @@ sap.ui.define(['../Keys', '../util/getActiveElement', '../types/NavigationMode',
 			const homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;
 			this._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange);
 		}
+		_handlePageUp() {
+			if (this._rowSize > 1) {
+				return;
+			}
+			this._handlePageUpFlat();
+		}
+		_handlePageDown() {
+			if (this._rowSize > 1) {
+				return;
+			}
+			this._handlePageDownFlat();
+		}
+		_handlePageUpFlat() {
+			if (this._skipItemsSize === null) {
+				this._currentIndex -= this._currentIndex;
+			}
+			if (this._currentIndex + 1 > this._skipItemsSize) {
+				this._currentIndex -= this._skipItemsSize;
+			} else {
+				this._currentIndex -= this._currentIndex;
+			}
+		}
+		_handlePageDownFlat() {
+			if (this._skipItemsSize === null) {
+				this._currentIndex = this._getItems().length - 1;
+			}
+			const currentToEndRange = this._getItems().length - this._currentIndex - 1;
+			if (currentToEndRange > this._skipItemsSize) {
+				this._currentIndex += this._skipItemsSize;
+			} else {
+				this._currentIndex = this._getItems().length - 1;
+			}
+		}
 		_applyTabIndex() {
 			const items = this._getItems();
 			for (let i = 0; i < items.length; i++) {

package/src/sap/ui/webc/common/thirdparty/base/generated/AssetParameters.js

@@ -1,6 +1,6 @@
 sap.ui.define(['exports'], function (exports) { 'use strict';
 
-	const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
+	const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw","sap_horizon","sap_horizon_exp"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
 	const DEFAULT_THEME = assetParameters.themes.default;
 	const DEFAULT_LANGUAGE = assetParameters.languages.default;
 	const DEFAULT_LOCALE = assetParameters.locales.default;