@ui5/webcomponents-base 0.0.0-fb61e9889 → 0.0.0-fd6264051

package/dist/Keys.js

@@ -131,10 +131,18 @@ const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key ==
 
 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);
@@ -145,8 +153,12 @@ const isEnd = event => (event.key ? event.key === "End" : event.keyCode === KeyC
 
 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);
@@ -191,12 +203,22 @@ const isF4 = 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, /* Ctrl */ false, /* Alt */ true, /* Shift */ 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); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
@@ -218,8 +240,12 @@ export {
 	isDownCtrl,
 	isUpShift,
 	isDownShift,
+	isUpAlt,
+	isDownAlt,
 	isLeftShift,
 	isRightShift,
+	isLeftShiftCtrl,
+	isRightShiftCtrl,
 	isUpShiftCtrl,
 	isDownShiftCtrl,
 	isHome,
@@ -228,6 +254,8 @@ export {
 	isMinus,
 	isHomeCtrl,
 	isEndCtrl,
+	isHomeShift,
+	isEndShift,
 	isEscape,
 	isTabNext,
 	isTabPrevious,
@@ -236,6 +264,8 @@ export {
 	isShow,
 	isF4,
 	isF4Shift,
+	isF6Previous,
+	isF6Next,
 	isF7,
 	isPageUp,
 	isPageDown,
@@ -245,4 +275,6 @@ export {
 	isPageDownAlt,
 	isPageUpShiftCtrl,
 	isPageDownShiftCtrl,
+	isShift,
+	isCtrlA,
 };

package/dist/ManagedStyles.js

@@ -0,0 +1,83 @@
+import createStyleInHead from "./util/createStyleInHead.js";
+import createLinkInHead from "./util/createLinkInHead.js";
+import { shouldUseLinks, getUrl } from "./CSP.js";
+
+const getStyleId = (name, value) => {
+	return value ? `${name}|${value}` : name;
+};
+
+const createStyle = (data, name, value = "") => {
+	const content = typeof data === "string" ? data : data.content;
+
+	if (shouldUseLinks()) {
+		const attributes = {};
+		attributes[name] = value;
+		const href = getUrl(data.packageName, data.fileName);
+		createLinkInHead(href, attributes);
+	} else if (document.adoptedStyleSheets) {
+		const stylesheet = new CSSStyleSheet();
+		stylesheet.replaceSync(content);
+		stylesheet._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later
+		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 (shouldUseLinks()) {
+		document.querySelector(`head>link[${name}="${value}"]`).href = 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 (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 (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);
+	}
+};
+
+export {
+	createStyle,
+	hasStyle,
+	updateStyle,
+	removeStyle,
+	createOrUpdateStyle,
+};

package/dist/Render.js

@@ -135,6 +135,7 @@ const _resolveTaskPromise = () => {
  * reRenderAllUI5Elements({tag: "ui5-button"}) -> re-renders only instances of ui5-button
  * reRenderAllUI5Elements({rtlAware: true}) -> re-renders only rtlAware components
  * reRenderAllUI5Elements({languageAware: true}) -> re-renders only languageAware components
+ * reRenderAllUI5Elements({themeAware: true}) -> re-renders only themeAware components
  * reRenderAllUI5Elements({rtlAware: true, languageAware: true}) -> re-renders components that are rtlAware or languageAware
  * etc...
  *
@@ -147,7 +148,8 @@ const reRenderAllUI5Elements = async filters => {
 		const tag = element.constructor.getMetadata().getTag();
 		const rtlAware = 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/dist/Runtimes.js

@@ -0,0 +1,107 @@
+import VersionInfo from "./generated/VersionInfo.js";
+import getSharedResource from "./getSharedResource.js";
+
+let currentRuntimeIndex;
+let currentRuntimeAlias = "";
+
+const compareCache = new Map();
+
+/**
+ * Central registry where all runtimes register themselves by pushing an object.
+ * The index in the registry servers as an ID for the runtime.
+ * @type {*}
+ */
+const Runtimes = getSharedResource("Runtimes", []);
+
+/**
+ * Registers the current runtime in the shared runtimes resource registry
+ */
+const registerCurrentRuntime = () => {
+	if (currentRuntimeIndex === undefined) {
+		currentRuntimeIndex = Runtimes.length;
+		Runtimes.push({
+			...VersionInfo,
+			alias: currentRuntimeAlias,
+			description: `Runtime ${currentRuntimeIndex} - ver ${VersionInfo.version}${currentRuntimeAlias ? ` (${currentRuntimeAlias})` : ""}`,
+		});
+	}
+};
+
+/**
+ * Returns the index of the current runtime's object in the shared runtimes resource registry
+ * @returns {*}
+ */
+const getCurrentRuntimeIndex = () => {
+	return currentRuntimeIndex;
+};
+
+/**
+ * Compares two runtimes and returns 1 if the first is of a bigger version, -1 if the second is of a bigger version, and 0 if equal
+ * @param index1 The index of the first runtime to compare
+ * @param index2 The index of the second runtime to compare
+ * @returns {number}
+ */
+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 any of the two is a next version, bigger buildTime wins
+	if (runtime1.isNext || runtime2.isNext) {
+		return runtime1.buildTime - runtime2.buildTime;
+	}
+
+	// If major versions differ, bigger one wins
+	const majorDiff = runtime1.major - runtime2.major;
+	if (majorDiff) {
+		return majorDiff;
+	}
+
+	// If minor versions differ, bigger one wins
+	const minorDiff = runtime1.minor - runtime2.minor;
+	if (minorDiff) {
+		return minorDiff;
+	}
+
+	// If patch versions differ, bigger one wins
+	const patchDiff = runtime1.patch - runtime2.patch;
+	if (patchDiff) {
+		return patchDiff;
+	}
+
+	// Bigger suffix wins, f.e. rc10 > rc9
+	// Important: suffix is alphanumeric, must use natural compare
+	const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+	const result = collator.compare(runtime1.suffix, runtime2.suffix);
+
+	compareCache.set(cacheIndex, result);
+	return result;
+};
+
+/**
+ * Set an alias for the the current app/library/microfrontend which will appear in debug messages and console warnings
+ * @param alias
+ */
+const setRuntimeAlias = alias => {
+	currentRuntimeAlias = alias;
+};
+
+const getAllRuntimes = () => {
+	return Runtimes;
+};
+
+export {
+	getCurrentRuntimeIndex,
+	registerCurrentRuntime,
+	compareRuntimes,
+	setRuntimeAlias,
+	getAllRuntimes,
+};

package/dist/StaticAreaItem.js

@@ -25,6 +25,9 @@ class StaticAreaItem extends HTMLElement {
 	setOwnerElement(ownerElement) {
 		this.ownerElement = ownerElement;
 		this.classList.add(this.ownerElement._id); // used for getting the popover in the tests
+		if (this.ownerElement.hasAttribute("data-ui5-static-stable")) {
+			this.setAttribute("data-ui5-stable", this.ownerElement.getAttribute("data-ui5-static-stable")); // stable selector
+		}
 	}
 
 	/**
@@ -76,15 +79,6 @@ class StaticAreaItem extends HTMLElement {
 		return this.shadowRoot;
 	}
 
-	/**
-	 * @protected
-	 * @param refName
-	 * @returns {Element}
-	 */
-	getStableDomRef(refName) {
-		return this.shadowRoot.querySelector(`[data-ui5-stable=${refName}]`);
-	}
-
 	static getTag() {
 		const pureTag = "ui5-static-area-item";
 		const suffix = getEffectiveScopingSuffixForTag(pureTag);

package/dist/SystemCSSVars.js

@@ -1,31 +1,10 @@
-import createStyleInHead from "./util/createStyleInHead.js";
-
-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;
-	}
-`;
+import { hasStyle, createStyle } from "./ManagedStyles.js";
+import systemCSSVars from "./generated/css/SystemCSSVars.css.js";
 
 const insertSystemCSSVars = () => {
-	if (document.querySelector(`head>style[data-ui5-system-css-vars]`)) {
-		return;
+	if (!hasStyle("data-ui5-system-css-vars")) {
+		createStyle(systemCSSVars, "data-ui5-system-css-vars");
 	}
-
-	createStyleInHead(systemCSSVars, { "data-ui5-system-css-vars": "" });
 };
 
 export default insertSystemCSSVars;

package/dist/UI5Element.js

@@ -18,7 +18,7 @@ import { isSlot, getSlotName, getSlottedElementsList } from "./util/SlotsHelper.
 import arraysAreEqual from "./util/arraysAreEqual.js";
 import getClassCopy from "./util/getClassCopy.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
-import isLegacyBrowser from "./isLegacyBrowser.js";
+import preloadLinks from "./theming/preloadLinks.js";
 
 let autoId = 0;
 
@@ -101,6 +101,9 @@ class UI5Element extends HTMLElement {
 	 */
 	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();
 
@@ -251,7 +254,8 @@ class UI5Element extends HTMLElement {
 
 			// Listen for any invalidation on the child if invalidateOnChildChange is true or an object (ignore when false or not set)
 			if (child.isUI5Element && slotData.invalidateOnChildChange) {
-				child.attachInvalidate(this._getChildChangeListener(slotName));
+				const method = (child.attachInvalidate || child._attachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			// Listen for the slotchange event if the child is a slot itself
@@ -311,7 +315,8 @@ class UI5Element extends HTMLElement {
 
 		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 (isSlot(child)) {
@@ -607,25 +612,27 @@ class UI5Element extends HTMLElement {
 
 	/**
 	 * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template
+	 * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option
 	 * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary
+	 *
 	 * @public
 	 */
 	getDomRef() {
+		// If a component set _getRealDomRef to its children, use the return value of this function
+		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`); // eslint-disable-line
 		}
+
+		return children[0];
 	}
 
 	/**
@@ -651,17 +658,6 @@ class UI5Element extends HTMLElement {
 		return this.getFocusDomRef();
 	}
 
-	/**
-	 * Use this method in order to get a reference to an element in the shadow root of the web component or the static area item of the component
-	 * @public
-	 * @method
-	 * @param {String} refName Defines the name of the stable DOM ref
-	 */
-	getStableDomRef(refName) {
-		const staticAreaResult = this.staticAreaItem && this.staticAreaItem.getStableDomRef(refName);
-		return staticAreaResult || this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
-	}
-
 	/**
 	 * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
 	 * @public
@@ -988,6 +984,7 @@ class UI5Element extends HTMLElement {
 			this._generateAccessors();
 			registerTag(tag);
 			window.customElements.define(tag, this);
+			preloadLinks(this);
 
 			if (altTag && !customElements.get(altTag)) {
 				registerTag(altTag);

package/dist/UI5ElementMetadata.js

@@ -188,6 +188,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.managedSlots;
 	}
 
+	/**
+	 * Determines whether this control supports F6 fast navigation
+	 * @public
+	 */
+	supportsF6FastNavigation() {
+		return !!this.metadata.fastNavigation;
+	}
+
 	/**
 	 * Returns an object with key-value pairs of properties and their metadata definitions
 	 * @public
@@ -212,6 +220,14 @@ class UI5ElementMetadata {
 		return !!this.metadata.languageAware;
 	}
 
+	/**
+	 * Determines whether this UI5 Element has any theme dependant carachteristics.
+	 * @returns {boolean}
+	 */
+	 isThemeAware() {
+		return !!this.metadata.themeAware;
+	}
+
 	/**
 	 * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
 	 * and determines whether this should cause and invalidation

package/dist/asset-registries/Icons.js

@@ -1,11 +1,12 @@
 import getSharedResource from "../getSharedResource.js";
+import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
+import { isThemeFamily } from "../config/Theme.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
 const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
 
 /**
  * @deprecated
@@ -47,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = DEFAULT_COLLECTION;
+		collection = _getDefaultCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -67,18 +68,16 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	// hardcoded alias in case icon explorer is used, resolve `BusinessSuiteInAppSymbols` to `business-suite`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "BusinessSuiteInAppSymbols") {
-		collection = "business-suite";
-		name = name.replace("icon-", "");
-	}
+	collection = collection || _getDefaultCollection();
+
+	// Normalize collection name.
+	// - resolve `SAP-icons-TNT` to `tnt`.
+	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
+	// - resolve `horizon` to `SAP-icons-v5`,
+	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
+	collection = _normalizeCollection(collection);
+	name = name.replace("icon-", "");
+
 	const registryKey = `${collection}/${name}`;
 	return { name, collection, registryKey };
 };
@@ -118,6 +117,18 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
+const _getDefaultCollection = () => {
+	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+};
+
+const _normalizeCollection = collectionName => {
+	if (IconCollectionsAlias[collectionName]) {
+		return IconCollectionsAlias[collectionName];
+	}
+
+	return collectionName;
+};
+
 export {
 	registerIconBundle,
 	registerIconLoader,

package/dist/assets-meta/IconCollectionsAlias.js

@@ -0,0 +1,18 @@
+/**
+ * Supported icon collection names and aliases.
+ *
+ * Users might specify a collection, using both the key and the value in the following key-value pairs,
+ * e.g the following pairs are completely exchangeable:
+ * "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
+ * "SAP-icons-v5/accept" and "horizon/accept".
+ *
+ * Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
+ * SAP-icons-v5" and "SAP-icons"(which does not have an alias).
+ */
+const IconCollectionsAlias = {
+	"SAP-icons-TNT": "tnt",
+	"BusinessSuiteInAppSymbols": "business-suite",
+	"horizon": "SAP-icons-v5",
+};
+
+export default IconCollectionsAlias;

package/dist/config/Theme.js

@@ -1,4 +1,5 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { reRenderAllUI5Elements } from "../Render.js";
 import applyTheme from "../theming/applyTheme.js";
 
 let theme;
@@ -20,9 +21,33 @@ const setTheme = async newTheme => {
 
 	// Update CSS Custom Properties
 	await applyTheme(theme);
+	await reRenderAllUI5Elements({ themeAware: true });
+};
+
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {String}
+ * @returns {boolean}
+ */
+const isTheme = _theme => {
+	const currentTheme = getTheme();
+	return currentTheme === _theme || currentTheme === `${_theme}_exp`;
+};
+
+/**
+ * Returns if the current theme is part of given theme family
+ * @private
+ * @param {String} the theme family
+ * @returns {boolean}
+ */
+const isThemeFamily = _theme => {
+	return getTheme().startsWith(_theme);
 };
 
 export {
 	getTheme,
 	setTheme,
+	isTheme,
+	isThemeFamily,
 };

package/dist/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.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?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.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?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.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?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.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?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.woff2?ui5-webcomponents) format("woff2"),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
+}