@openui5/sap.ui.webc.common 1.96.5 → 1.99.0

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

@@ -1,10 +1,13 @@
-sap.ui.define(['exports', './util/setToArray'], function (exports, setToArray) { 'use strict';
+sap.ui.define(['exports', './util/setToArray', './getSharedResource', './Runtimes'], function (exports, setToArray, getSharedResource, Runtimes) { 'use strict';
 
+	const Tags = getSharedResource("Tags", new Map());
 	const Definitions = new Set();
-	const Failures = new Set();
+	let Failures = {};
 	let failureTimeout;
+	const UNKNOWN_RUNTIME = "unknown";
 	const registerTag = tag => {
 		Definitions.add(tag);
+		Tags.set(tag, Runtimes.getCurrentRuntimeIndex());
 	};
 	const isTagRegistered = tag => {
 		return Definitions.has(tag);
@@ -13,17 +16,57 @@ sap.ui.define(['exports', './util/setToArray'], function (exports, setToArray) {
 		return setToArray(Definitions);
 	};
 	const recordTagRegistrationFailure = tag => {
-		Failures.add(tag);
+		let tagRegRuntimeIndex = Tags.get(tag);
+		if (tagRegRuntimeIndex === undefined) {
+			tagRegRuntimeIndex = UNKNOWN_RUNTIME;
+		}
+		Failures[tagRegRuntimeIndex] = Failures[tagRegRuntimeIndex] || new Set();
+		Failures[tagRegRuntimeIndex].add(tag);
 		if (!failureTimeout) {
 			failureTimeout = setTimeout(() => {
 				displayFailedRegistrations();
+				Failures = {};
 				failureTimeout = undefined;
 			}, 1000);
 		}
 	};
 	const displayFailedRegistrations = () => {
-		console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${setToArray(Failures).join(", ")}`);
-		Failures.clear();
+		const allRuntimes = Runtimes.getAllRuntimes();
+		const currentRuntimeIndex = Runtimes.getCurrentRuntimeIndex();
+		const currentRuntime = allRuntimes[currentRuntimeIndex];
+		let message = `Multiple UI5 Web Components instances detected.`;
+		if (allRuntimes.length > 1) {
+			message = `${message}\nLoading order (versions before 1.1.0 not listed): ${allRuntimes.map(runtime => `\n${runtime.description}`).join("")}`;
+		}
+		Object.keys(Failures).forEach(otherRuntimeIndex => {
+			let comparison;
+			let otherRuntime;
+			if (otherRuntimeIndex === UNKNOWN_RUNTIME) {
+				comparison = 1;
+				otherRuntime = {
+					description: `Older unknown runtime`,
+				};
+			} else {
+				comparison = Runtimes.compareRuntimes(currentRuntimeIndex, otherRuntimeIndex);
+				otherRuntime = allRuntimes[otherRuntimeIndex];
+			}
+			let compareWord;
+			if (comparison > 0) {
+				compareWord = "an older";
+			} else if (comparison < 0) {
+				compareWord = "a newer";
+			} else {
+				compareWord = "the same";
+			}
+			message = `${message}\n\n"${currentRuntime.description}" failed to define ${Failures[otherRuntimeIndex].size} tag(s) as they were defined by a runtime of ${compareWord} version "${otherRuntime.description}": ${setToArray(Failures[otherRuntimeIndex]).sort().join(", ")}.`;
+			if (comparison > 0) {
+				message = `${message}\nWARNING! If your code uses features of the above web components, unavailable in ${otherRuntime.description}, it might not work as expected!`;
+			} else {
+				message = `${message}\nSince the above web components were defined by the same or newer version runtime, they should be compatible with your code.`;
+			}
+		});
+		message = `${message}\n\nTo prevent other runtimes from defining tags that you use, consider using scoping or have third-party libraries use scoping: https://github.com/SAP/ui5-webcomponents/blob/master/docs/2-advanced/03-scoping.md.`;
+		console.warn(message);
 	};
 
 	exports.getAllRegisteredTags = getAllRegisteredTags;

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

@@ -7,9 +7,10 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const safari = !ie && !chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(ua);
 	const webkit = !ie && /webkit/.test(ua);
 	const windows = navigator.platform.indexOf("Win") !== -1;
+	const iOS = navigator.platform.match(/iPhone|iPad|iPod/) || (navigator.userAgent.match(/Mac/) && "ontouchend" in document);
 	const android = !windows && /Android/.test(ua);
 	const androidPhone = android && /(?=android)(?=.*mobile)/i.test(ua);
-	const ipad = /ipad/i.test(ua);
+	const ipad = /ipad/i.test(ua) || (/Macintosh/i.test(ua) && "ontouchend" in document);
 	let windowsVersion;
 	let webkitVersion;
 	let tablet;
@@ -74,10 +75,18 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const isDesktop = () => {
 		return (!isTablet() && !isPhone()) || isWindows8OrAbove();
 	};
+	const isCombi = () => {
+		return isTablet() && isDesktop();
+	};
+	const isIOS = () => {
+		return iOS;
+	};
 
 	exports.isChrome = isChrome;
+	exports.isCombi = isCombi;
 	exports.isDesktop = isDesktop;
 	exports.isIE = isIE;
+	exports.isIOS = isIOS;
 	exports.isPhone = isPhone;
 	exports.isSafari = isSafari;
 	exports.isTablet = isTablet;

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

@@ -17,11 +17,14 @@ sap.ui.define(function () { 'use strict';
 		}
 		detachEvent(eventName, fnFunction) {
 			const eventRegistry = this._eventRegistry;
-			let eventListeners = eventRegistry.get(eventName);
+			const eventListeners = eventRegistry.get(eventName);
 			if (!eventListeners) {
 				return;
 			}
-			eventListeners = eventListeners.filter(fn => fn !== fnFunction);
+			const indexOfFnToDetach = eventListeners.indexOf(fnFunction);
+			if (indexOfFnToDetach !== -1) {
+				eventListeners.splice(indexOfFnToDetach, 1);
+			}
 			if (eventListeners.length === 0) {
 				eventRegistry.delete(eventName);
 			}

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

@@ -1,58 +1,5 @@
-sap.ui.define(['./util/createStyleInHead', './FeaturesRegistry'], function (createStyleInHead, FeaturesRegistry) { 'use strict';
+sap.ui.define(['./ManagedStyles', './FeaturesRegistry', './generated/css/FontFace.css', './generated/css/OverrideFontFace.css'], function (ManagedStyles, FeaturesRegistry, FontFace_css, OverrideFontFace_css) { 'use strict';
 
-	const font72RegularWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents`;
-	const font72RegularWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents`;
-	const font72RegularFullWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents`;
-	const font72RegularFullWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents`;
-	const font72BoldWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents`;
-	const font72BoldWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents`;
-	const font72BoldFullWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents`;
-	const font72BoldFullWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents`;
-	const fontFaceCSS = `
-	@font-face {
-		font-family: "72";
-		font-style: normal;
-		font-weight: 400;
-		src: local("72"),
-			url(${font72RegularWoff2}) format("woff2"),
-			url(${font72RegularWoff}) format("woff");
-	}
-	
-	@font-face {
-		font-family: "72full";
-		font-style: normal;
-		font-weight: 400;
-		src: local('72-full'),
-			url(${font72RegularFullWoff2}) format("woff2"),
-			url(${font72RegularFullWoff}) format("woff");
-		
-	}
-	
-	@font-face {
-		font-family: "72";
-		font-style: normal;
-		font-weight: 700;
-		src: local('72-Bold'),
-			url(${font72BoldWoff2}) format("woff2"),
-			url(${font72BoldWoff}) format("woff");
-	}
-	
-	@font-face {
-		font-family: "72full";
-		font-style: normal;
-		font-weight: 700;
-		src: local('72-Bold-full'),
-			url(${font72BoldFullWoff2}) format("woff2"),
-			url(${font72BoldFullWoff}) format("woff");
-	}
-`;
-	const overrideFontFaceCSS = `
-	@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');
-	}
-`;
 	const insertFontFace = () => {
 		const OpenUI5Support = FeaturesRegistry.getFeature("OpenUI5Support");
 		if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {
@@ -61,13 +8,13 @@ sap.ui.define(['./util/createStyleInHead', './FeaturesRegistry'], function (crea
 		insertOverrideFontFace();
 	};
 	const insertMainFontFace = () => {
-		if (!document.querySelector(`head>style[data-ui5-font-face]`)) {
-			createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
+		if (!ManagedStyles.hasStyle("data-ui5-font-face")) {
+			ManagedStyles.createStyle(FontFace_css, "data-ui5-font-face");
 		}
 	};
 	const insertOverrideFontFace = () => {
-		if (!document.querySelector(`head>style[data-ui5-font-face-override]`)) {
-			createStyleInHead(overrideFontFaceCSS, { "data-ui5-font-face-override": "" });
+		if (!ManagedStyles.hasStyle("data-ui5-font-face-override")) {
+			ManagedStyles.createStyle(OverrideFontFace_css, "data-ui5-font-face-override");
 		}
 	};
 

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,14 +118,20 @@ 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 isUpAlt = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, true, false);
+	const isDownAlt = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, true, false);
 	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 isLeftShiftCtrl = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, true, false, true);
+	const isRightShiftCtrl = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, true, 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);
 	const isEnd = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && !hasModifierKeys(event);
 	const isHomeCtrl = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, true, false, false);
+	const isHomeShift = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, false, false, true);
 	const isEndCtrl = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, true, false, false);
+	const isEndShift = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, false, false, true);
 	const isEscape = event => (event.key ? event.key === "Escape" || event.key === "Esc" : event.keyCode === KeyCodes.ESCAPE) && !hasModifierKeys(event);
 	const isTabNext = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && !hasModifierKeys(event);
 	const isTabPrevious = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && checkModifierKeys(event,  false,  false,  true);
@@ -151,33 +157,46 @@ 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 isF6Next = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, false))
+	|| ((event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, true, false));
+	const isF6Previous = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, true))
+	|| ((event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_Up) && checkModifierKeys(event, true, true, false));
 	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);
 	};
+	const isShift = event => event.key === "Shift" || event.keyCode === KeyCodes.SHIFT;
+	const isCtrlA = event => ((event.key === "A" || event.key === "a") || event.which === KeyCodes.A) && checkModifierKeys(event, true, false, false);
 	const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event);
 	const getCtrlKey = event => !!(event.metaKey || event.ctrlKey);
 	const checkModifierKeys = (event, bCtrlKey, bAltKey, bShiftKey) => event.shiftKey === bShiftKey && event.altKey === bAltKey && getCtrlKey(event) === bCtrlKey;
 
 	exports.isBackSpace = isBackSpace;
+	exports.isCtrlA = isCtrlA;
 	exports.isDelete = isDelete;
 	exports.isDown = isDown;
+	exports.isDownAlt = isDownAlt;
 	exports.isDownCtrl = isDownCtrl;
 	exports.isDownShift = isDownShift;
 	exports.isDownShiftCtrl = isDownShiftCtrl;
 	exports.isEnd = isEnd;
 	exports.isEndCtrl = isEndCtrl;
+	exports.isEndShift = isEndShift;
 	exports.isEnter = isEnter;
 	exports.isEnterShift = isEnterShift;
 	exports.isEscape = isEscape;
 	exports.isF4 = isF4;
 	exports.isF4Shift = isF4Shift;
+	exports.isF6Next = isF6Next;
+	exports.isF6Previous = isF6Previous;
 	exports.isF7 = isF7;
 	exports.isHome = isHome;
 	exports.isHomeCtrl = isHomeCtrl;
+	exports.isHomeShift = isHomeShift;
 	exports.isLeft = isLeft;
 	exports.isLeftCtrl = isLeftCtrl;
 	exports.isLeftShift = isLeftShift;
+	exports.isLeftShiftCtrl = isLeftShiftCtrl;
 	exports.isMinus = isMinus;
 	exports.isPageDown = isPageDown;
 	exports.isPageDownAlt = isPageDownAlt;
@@ -191,12 +210,15 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	exports.isRight = isRight;
 	exports.isRightCtrl = isRightCtrl;
 	exports.isRightShift = isRightShift;
+	exports.isRightShiftCtrl = isRightShiftCtrl;
+	exports.isShift = isShift;
 	exports.isShow = isShow;
 	exports.isSpace = isSpace;
 	exports.isSpaceShift = isSpaceShift;
 	exports.isTabNext = isTabNext;
 	exports.isTabPrevious = isTabPrevious;
 	exports.isUp = isUp;
+	exports.isUpAlt = isUpAlt;
 	exports.isUpCtrl = isUpCtrl;
 	exports.isUpShift = isUpShift;
 	exports.isUpShiftCtrl = isUpShiftCtrl;

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/Render.js

@@ -78,7 +78,8 @@ sap.ui.define(['exports', './EventProvider', './RenderQueue', './CustomElementsR
 			const tag = element.constructor.getMetadata().getTag();
 			const rtlAware = RTLAwareRegistry.isRtlAware(element.constructor);
 			const languageAware = element.constructor.getMetadata().isLanguageAware();
-			if (!filters || (filters.tag === tag) || (filters.rtlAware && rtlAware) || (filters.languageAware && languageAware)) {
+			const themeAware = element.constructor.getMetadata().isThemeAware();
+			if (!filters || (filters.tag === tag) || (filters.rtlAware && rtlAware) || (filters.languageAware && languageAware) || (filters.themeAware && themeAware)) {
 				renderDeferred(element);
 			}
 		});

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

@@ -0,0 +1,65 @@
+sap.ui.define(['exports', './generated/VersionInfo', './getSharedResource'], function (exports, VersionInfo, getSharedResource) { 'use strict';
+
+	let currentRuntimeIndex;
+	let currentRuntimeAlias = "";
+	const compareCache = new Map();
+	const Runtimes = getSharedResource("Runtimes", []);
+	const registerCurrentRuntime = () => {
+		if (currentRuntimeIndex === undefined) {
+			currentRuntimeIndex = Runtimes.length;
+			Runtimes.push({
+				...VersionInfo,
+				alias: currentRuntimeAlias,
+				description: `Runtime ${currentRuntimeIndex} - ver ${VersionInfo.version}${currentRuntimeAlias ? ` (${currentRuntimeAlias})` : ""}`,
+			});
+		}
+	};
+	const getCurrentRuntimeIndex = () => {
+		return currentRuntimeIndex;
+	};
+	const compareRuntimes = (index1, index2) => {
+		const cacheIndex = `${index1},${index2}`;
+		if (compareCache.has(cacheIndex)) {
+			return compareCache.get(cacheIndex);
+		}
+		const runtime1 = Runtimes[index1];
+		const runtime2 = Runtimes[index2];
+		if (!runtime1 || !runtime2) {
+			throw new Error("Invalid runtime index supplied");
+		}
+		if (runtime1.isNext || runtime2.isNext) {
+			return runtime1.buildTime - runtime2.buildTime;
+		}
+		const majorDiff = runtime1.major - runtime2.major;
+		if (majorDiff) {
+			return majorDiff;
+		}
+		const minorDiff = runtime1.minor - runtime2.minor;
+		if (minorDiff) {
+			return minorDiff;
+		}
+		const patchDiff = runtime1.patch - runtime2.patch;
+		if (patchDiff) {
+			return patchDiff;
+		}
+		const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+		const result = collator.compare(runtime1.suffix, runtime2.suffix);
+		compareCache.set(cacheIndex, result);
+		return result;
+	};
+	const setRuntimeAlias = alias => {
+		currentRuntimeAlias = alias;
+	};
+	const getAllRuntimes = () => {
+		return Runtimes;
+	};
+
+	exports.compareRuntimes = compareRuntimes;
+	exports.getAllRuntimes = getAllRuntimes;
+	exports.getCurrentRuntimeIndex = getCurrentRuntimeIndex;
+	exports.registerCurrentRuntime = registerCurrentRuntime;
+	exports.setRuntimeAlias = setRuntimeAlias;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+});

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

@@ -9,6 +9,9 @@ sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffe
 		setOwnerElement(ownerElement) {
 			this.ownerElement = ownerElement;
 			this.classList.add(this.ownerElement._id);
+			if (this.ownerElement.hasAttribute("data-ui5-static-stable")) {
+				this.setAttribute("data-ui5-stable", this.ownerElement.getAttribute("data-ui5-static-stable"));
+			}
 		}
 		update() {
 			if (this._rendered) {
@@ -43,9 +46,6 @@ sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffe
 			await Render.renderFinished();
 			return this.shadowRoot;
 		}
-		getStableDomRef(refName) {
-			return this.shadowRoot.querySelector(`[data-ui5-stable=${refName}]`);
-		}
 		static getTag() {
 			const pureTag = "ui5-static-area-item";
 			const suffix = CustomElementsScope.getEffectiveScopingSuffixForTag(pureTag);

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/DataType', './util/StringHelper', './util/isValidPropertyName', './util/isDescendantOf', './util/SlotsHelper', './util/arraysAreEqual', './util/getClassCopy', './locale/RTLAwareRegistry', './isLegacyBrowser'], function (merge, Boot, UI5ElementMetadata, EventProvider, getSingletonElementInstance, StaticAreaItem, updateShadowRoot, Render, CustomElementsRegistry, DOMObserver, NoConflict, getEffectiveDir, DataType, StringHelper, isValidPropertyName, isDescendantOf, 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();
@@ -41,6 +41,9 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 		}
 		async connectedCallback() {
 			this.setAttribute(this.constructor.getMetadata().getPureTag(), "");
+			if (this.constructor.getMetadata().supportsF6FastNavigation()) {
+				this.setAttribute("data-sap-ui-fastnavgroup", "true");
+			}
 			const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 			this._inDOM = true;
 			if (slotsAreManaged) {
@@ -142,7 +145,8 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 				}
 				child = this.constructor.getMetadata().constructor.validateSlotValue(child, slotData);
 				if (child.isUI5Element && slotData.invalidateOnChildChange) {
-					child.attachInvalidate(this._getChildChangeListener(slotName));
+					const method = (child.attachInvalidate || child._attachChange).bind(child);
+					method(this._getChildChangeListener(slotName));
 				}
 				if (SlotsHelper.isSlot(child)) {
 					this._attachSlotChange(child, slotName);
@@ -183,7 +187,8 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			const children = this._state[propertyName];
 			children.forEach(child => {
 				if (child && child.isUI5Element) {
-					child.detachInvalidate(this._getChildChangeListener(slotName));
+					const method = (child.detachInvalidate || child._detachChange).bind(child);
+					method(this._getChildChangeListener(slotName));
 				}
 				if (SlotsHelper.isSlot(child)) {
 					this._detachSlotChange(child, slotName);
@@ -320,18 +325,17 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			return this._domRefReadyPromise;
 		}
 		getDomRef() {
+			if (typeof this._getRealDomRef === "function") {
+				return this._getRealDomRef();
+			}
 			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();
@@ -344,10 +348,6 @@ sap.ui.define(['./thirdparty/merge', './Boot', './UI5ElementMetadata', './EventP
 			await this._waitForDomRef();
 			return this.getFocusDomRef();
 		}
-		getStableDomRef(refName) {
-			const staticAreaResult = this.staticAreaItem && this.staticAreaItem.getStableDomRef(refName);
-			return staticAreaResult || this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
-		}
 		async focus() {
 			await this._waitForDomRef();
 			const focusDomRef = this.getFocusDomRef();
@@ -537,6 +537,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

@@ -97,6 +97,9 @@ sap.ui.define(['./types/DataType', './util/isDescendantOf', './util/StringHelper
 		slotsAreManaged() {
 			return !!this.metadata.managedSlots;
 		}
+		supportsF6FastNavigation() {
+			return !!this.metadata.fastNavigation;
+		}
 		getProperties() {
 			return this.metadata.properties || {};
 		}
@@ -105,6 +108,9 @@ sap.ui.define(['./types/DataType', './util/isDescendantOf', './util/StringHelper
 		}
 		isLanguageAware() {
 			return !!this.metadata.languageAware;
+		}
+		 isThemeAware() {
+			return !!this.metadata.themeAware;
 		}
 		shouldInvalidateOnChildChange(slotName, type, name) {
 			const config = this.getSlots()[slotName].invalidateOnChildChange;